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

.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. IT部门能力评估...

    IT运行成本和变化成本越来越高,IT部门是否上了一些对企业无价值的系统,是否充分利用了已有系统的价值? 随 着IT应用不断深入,庞大的企业IT系统日积月累,各种隐患渐渐显露.IT系统变得越来越复杂,运 ...

  2. UVA12130 Summits(BFS + 贪心)

    UVA12130 Summits(BFS + 贪心) 题目链接 题目大意: 给你一个h ∗ w 的矩阵,矩阵的每一个元素都有一个值,代表这个位置的高度. 题目要求你找出这个图中有多少个位置是峰值点.从 ...

  3. 读取并创建excel文件(.xls)

    第三方库,附件 缺点:该库只支持.xls文件的操作 1.读取excel文件 例子: try { /** * 后续考虑问题,比如Excel里面的图片以及其他数据类型的读取 **/ InputStream ...

  4. Cocos2dx 把 glview 渲染到 Qt 控件上(Mac 环境)

    本文原链接:http://www.cnblogs.com/zouzf/p/4423256.html 环境:Mac 10.9.2   Xcode5.1.1  Qt5.3  cocos2dx-2.2.4 ...

  5. 15款效果很酷的最新jQuery/CSS3特效

    很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换 一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...

  6. 在Linux 应用层 基于i2c-dev.h 实现i2c读写

    /* i2c-dev.h - i2c-bus driver, char device interface Copyright (C) 1995-97 Simon G. Vogl Copyright ( ...

  7. Eclipse中如何修改SVN的地址

    在SVN服务端的IP更改后,客户端SVN的连接地址可以在Eclipse中进行修改,方法如下: 首先:在Eclipse中选择Windows-> Show View->others 就会出现[ ...

  8. 使用ssh免密码登录其他机器

    本机 ssh-keygen -t rsa – cd ~/ssh – cp -p id_rsa.pub authorized_keys2 – chmod go-rwx authorized_keys2 ...

  9. php常见小知识总结

    1.如果在函数中 unset()一个全局变量,则只是局部变量被销毁,而在调用环境中的变量将保持调unset() 之前一样的值.如果是想把全局变量清空,用$var = array(),注意在他之前别用u ...

  10. led显字风扇原理?

    神奇的是上面的图案居然会变,十分好奇,求告知原理?? 其实就是依靠转速计算出LED灯变化的频率.这点和老式CRT的显示原理差不多.比如说风扇的转速时60rpm就是每分钟60圈,每秒1圈(当然实际转速快 ...