一般的文字截断(适用于内联与块):

.text-overflow {
display:block;/*内联对象需加 */
width:31em;/* 何问起 hovertree.com */
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

对于表格文字溢出的定义:

对于表格超出范围显示省略号

 table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
/*
何问起
hovertree.com
*/
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}

需要你注意的是,这个CSS样式只对单行的文字的效,如果你想把它用在多行上,也只有第一行有作用的。 这个写法只有IE会有“...”,

其它的浏览器文本超出指定宽度时会隐藏。

特效:http://www.cnblogs.com/roucheng/p/texiao.html

CSS控制文本超出指定宽度显示省略号和文本不换行的更多相关文章

  1. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  2. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  3. CSS实现文本超过指定长度显示省略号

    <style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...

  4. CSS控制TD内的文本超出指定宽度后不换行而用省略号代替

    <style type="text/css"> .lineOverflow { width: 100px; border:#000 solid 1px; text-ov ...

  5. flutter实现文字超出最大宽度显示省略号

    Container( width: 60, child: Text( '...', maxLines: 1, overflow: TextOverflow.ellipsis, ), ) 给Text外层 ...

  6. Table组件设置文字超出宽度显示省略号,鼠标悬停以悬浮框显示

    一.设置文字超出宽度显示省略号 注意点: 1.  需要指定column的width属性,否则列头跟内容可能不对齐.需要留一列不设置宽度以适应弹性布局. 2. 列宽度width必须大于ellipsis的 ...

  7. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  8. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  9. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

随机推荐

  1. CSS层叠样式表的层叠是什么意思(转自知乎)

    转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...

  2. 对list集合中的对象按照对象的某一属性进行排序

    /**  * 重新对list中的CmsCyUser对象按照最终的票数进行排序  * @param list  */ private void reSort(List list) {   Object[ ...

  3. dolby逝世:纪念一下

     杜比公司的成立快50年了(1965),想想中国1965年在干啥.中国怎么可能有.   小科普一下,dolby的成功有3个时间点和技术,第一次是在英国开发了dolby B降噪技术,是用在早期的卡带降噪 ...

  4. 360随身WiFi驱动下载

    一场不算太好的体验,但还是解决问题了 360随身WiFi驱动下载地址 事情经过: 某天在家里组装起PC,才发现当时没有在这屋里预留网线接口,走明线穿堂过户肯定是不合适的,还是买个无线网卡吧 自然还是要 ...

  5. websocket for python

    https://github.com/aaugustin/websockets server.py #!/usr/bin/env python import asyncioimport websock ...

  6. 记一次VNC远程连接Linux问题解决记录(5900端口测试、KDE桌面安装)

    最近几天,到一个项目上安装Linux部署环境.由于服务器在机房,而进机房又比较麻烦,于是选择VNC远程连接Linux就显得自然而然了.以前也用过VNC,而且还经常使用,由于各个项目环境不太一样,这次也 ...

  7. Gson整合Volley返回对象--GsonRequest

    Gson是一个使用映射支持JSON与Java对象之间相互转换的库文件.你可以定义和JSON keys相对应名称的Java对象.把对象传递给传递Gson,然后Gson会帮你为对象填充字段值. 下面是一个 ...

  8. Raft论文的一些问题

    抛些问题出来,真正解释了这些问题才算理解了论文.:) 1. 什么是复制状态机 2. Raft vs Paxos 3. Raft的设计目标understandability,为达到设计目标在做设计时如何 ...

  9. wav 转换到 flac

    参考自:http://so.trust.blog.163.com/blog/static/17188620020127197618621/ wav  无损无压缩: flac无损压缩 将 wav 转换到 ...

  10. CSS基础(三):选择器

    常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...