方法1.多行控制(css3)

.text {
width: 100%;
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
overflow: hidden;
}

line-clamp:几行以后显示省略号(例子为2行)

方法2.单行定宽

.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

应用在block级的元素上

连续字符换行问题

p{
word-break:break-all;
word-wrap:break-word;
}

【CSS】文字超出显示省略号&连续字符换行的更多相关文章

  1. css文字超出显示省略号

    单号: white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行: word-break: break-all; text-ove ...

  2. CSS文字过多显示省略号

    CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -web ...

  3. css文字溢出显示省略号

    1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...

  4. css内容超出显示省略号

    CSS实现单行.溢出显示省略号(…) 把要设置的显示省略号的标签,加上以下的属性 overflow: hidden; /*超出不显示*/ text-overflow: ellipsis;/* 超出内容 ...

  5. 用户界面样式(cursor,resize,vertical-align,outline,文字超出显示省略号)

    1. 鼠标样式 cursor default: 小白(箭头)默认 pointer:小手 move:移动 text:文本 not-allowed:禁止 2. 轮廓线(表单外发光)outline 给表单添 ...

  6. CSS解决文字超出显示省略号问题

    超出一行 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 超出多行 overflow: hidden; text-ove ...

  7. table表格中文字超出显示省略号

    第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一 ...

  8. table td 文字超出显示省略号

    .autocut {      width:250px;      overflow:hidden;      white-space:nowrap;      text-overflow:ellip ...

  9. css文字超出变省略号...

    <style>.text1 {    width:200px;    overflow:hidden;    text-overflow:ellipsis;    -o-text-over ...

随机推荐

  1. C#连接Oracle数据库查询数据

    C#连接Oracle数据库可以实现许多我们需要的功能,下面介绍的是C#连接Oracle数据库查询数据的方法,如果您对C#连接Oracle数据库方面感兴趣的话,不妨一看. using System; u ...

  2. JPlayer使用之二,主要函数介绍

    上一篇插件搭建的顺序最后一步的页面初始化函数中,就是最重要的一步,就先从这个函数说起吧. $("#jquery_jplayer_1").jPlayer({ ready: funct ...

  3. Java Ioc详解和实现

    作者:竹竿 这章我们讲Java Spring的Ioc控制反转, DI依赖注入. 阅读此文之前,必须深入理解Java反射原理. 1. Ioc控制反转 原来类对象实例的创建都是有程序员自己通过new进行的 ...

  4. 理解 uncaughtException 和 domain 和 try catch 区别

    文章 实践 uncaughtException 捕获的是全局的异常, 反应慢, 每个回调完成后才发出异常, 书写也麻烦 domain 可以捕获每个异常, 及时反馈, 并且书写简洁 但他们两个捕获的异常 ...

  5. Slice header 中的frame_num的含义?

    Frame_num表示解码的顺序.该图像是参考帧的时候,Frame_num才有意义.非参考帧的frame_num在poc type为2或3时,用于poc值的计算. H264中frame_num定义如下 ...

  6. Python2、3学习及迁移

    一.Python2.7 Python 2.7教程 - 廖雪峰的官方网站 Python 基础教程 | 菜鸟教程 二.Python3 Python教程 - 廖雪峰的官方网站 Python3 教程 | 菜鸟 ...

  7. 如何看待 Kotlin 成为 Android 官方支持开发语言?

    Google IO 2017宣布了 Kotlin 会成为 Android 官方开发语言.一时间朋友圈和Android圈被各种刷屏.当然我也顺势而为发布了一篇的文章<为什么我要改用Kotlin&g ...

  8. python 两种导入的区别

    参考文献: 法1:import module1 使用:这样你调用时就得:module1.funct(),funct2(),... 法2:from module1 import funct() 使用就直 ...

  9. 非在线PDF转图片!!!

    关于非在线 由于这次要转的是身份证,不是阴谋论,防人之心还是要有的.万一呢. 关于工具 试了好多工具,有一家软件竟然是反过来的,即图片转pdf.也给搜了出来,主要的是下载页面还显示的pdf转图片,啊呸 ...

  10. web端高德地图javascript API的调用

    [转载https://www.cnblogs.com/zimuzimu/p/6202244.html]web端高德地图javascript API的调用 关于第三放地图的使用,腾讯.百度.高德 具体怎 ...