方法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. js停止(阻止)浏览器继续加载内容

    这个应该是一个比较特殊的要求,一般网站都没有这个功能,对于一个新手来说,真的不知道从何处下手,只有在网上搜索了,寻找现成答案,寻寻觅觅一天没有结果.但是这个功能还是需要,第二天继续网上大肆搜寻.终于功 ...

  2. MD5加密(java和c#)

    java代码 public static String md5(String str) { try { MessageDigest md = MessageDigest.getInstance(&qu ...

  3. spring 核心接口之 Ordered

    Spring中提供了一个Ordered接口.从单词意思就知道Ordered接口的作用就是用来排序的.Spring框架是一个大量使用策略设计模式的框架,这意味着有很多相同接口的实现类,那么必定会有优先级 ...

  4. TableviewCell嵌套TextView自动换行

    TableviewCell嵌套TextView自动换行 欢迎到github上去下载源码Demo, github链接:https://github.com/mengzhihun6 效果图:

  5. 关于微信中JS-SDK的接口验证过程详细说明

    最近在做微信的企业服务号,刚开始通过个人的测试平台进行开发,使用了自定义菜单,自定义菜单包含两个功能:1.扫一扫,通过扫描我们账单的二维码,绑定账户和账单的关系:2.打开我们系统的账单查询页面,查询账 ...

  6. (转)MapReduce Design Patterns(chapter 2 (part 2))(三)

    Median and standard deviation 中值和标准差的计算比前面的例子复杂一点.因为这种运算是非关联的,它们不是那么容易的能从combiner中获益.中值是将数据集一分为两等份的数 ...

  7. python︱用pyodbc连接数据库

    直接连接数据库和创建一个游标(cursor) 数据查询(SQL语句为 select -from..where) 1.pyodbc连接 import pyodbc cnxn = pyodbc.conne ...

  8. 新浪云使用smarty模板的方法

    在部署到sina app engine(sae)上时出现了问题,因为sae作为云计算平台式无法进行文件读写操作的,所以Smarty中输出的缓存文件就无法实现. 错误信息:“SAE_Fatal_erro ...

  9. matlab linux的安装(第二次)

    1 挂载 2 下载jdk,matlab里面那个不行,缺点东西 3 安装 ./install *** 4 激活,非在线 5 license.lic路径在百度云中有 6 运行路径在你安装过程中的选的路径, ...

  10. libudev-dev : Depends: libudev0 (= 175-0ubuntu9) but 175-0ubuntu9.3 is to be installed 错误解决方案

    libudev-dev : Depends: libudev0 (= -0ubuntu9) but -0ubuntu9. is to be installed 错误解决方案 参考文章: 1. ubun ...