CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现_CSS
一般的文字截断（适用于内联与块）：
- .text-overflow{
- display:block;/*内联对象需加*/
- width:31em;/*何问起hovertree.com*/
- word-break:keep-all;/*不换行*/
- whitewhite-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;/*不换行*/
- whitewhite-space:nowrap;/*不换行*/
- overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/
- text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...)；需与overflow:hidden;一起使用。*/
- }
需要你注意的是，这个CSS样式只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，
其它的浏览器文本超出指定宽度时会隐藏。
以上这篇CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持维易网。
温馨提示：本网使用的部分文字和图片来源于互联网，若有版权问题，请与我们联系！
相关文章推荐
-
CSS3实现翘边的阴影效果的代码示例
效果： HTML代码： XML/HTML Code 复制内容到剪贴板 div class = boxshadow / div CSS代码： CSS Code 复制内容到剪贴板 .box{ width : 300px ; height : 100px ; background : #ccc ; border -radius: 10px ; margin : 10px ; } .shadow{ position : relati
-
浅谈CSS中display/float/position属性值的相互影响_CSS教程_CSS_
有3个属性和布局以及box的创建有关：'display', 'position' 和 'float'，彼此交互作用如下： 如果'display'值为'none'，则'position' 和 'float'无作用。这种情况下，不生成box。 否则， 如果'position'值为'absolute' 或 'fixed', box被绝对定位，'float'的
-
CSS超出文本指定宽度用省略号代替和文本不换行
一般的文字截断（适用于内联与块）： CSS Code 复制内容到剪贴板 .text- overflow { display : block ; /*内联对象需加*/ width :31em; /*何问起hovertree.com*/ word-break:keep- all ; /*不换行*/ white white-space : nowrap ; /*不换行*/ overflow : hid