css超出部分省略号|CSS 控制需隐藏的文字样式代码

在一个限定了高宽的容器中放入文字，当文字超出时就会出现杯具，简单的控制使用 CSS 即可；
观察了一下，使用四大金刚即可使此文字超出时自动截去末尾，并加上省略号：

 代码如下

.words{
width:200px; //限定宽度
white-space:nowrap; //强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
word-break:keep-all; //对于中文，韩文，日文，不允许字断开
text-overflow:ellipsis; //当对象内文本溢出时显示省略标记(...)
overflow:hidden; //超出容器不显示
}

例

 代码如下

测试文字长度测试文字长度测试文字长度测试文字长度测试文字长度


white-space-nowrap
word-break-keep-all
overflow-hidden
text-overflow-ellipsis

启用的 Classes:

css

 代码如下

.box{line-height:22px; height:22px; width:200px; overflow:auto; border:1px solid #ccc; margin:10px;}
.white-space-nowrap{white-space:nowrap;}
.word-break-keep-all{word-break:keep-all;}
.overflow-hidden{overflow:hidden;}
.text-overflow-ellipsis{text-overflow:ellipsis;}

css超出部分省略号|CSS 控制需隐藏的文字样式代码

http://m.bbyears.com/bangongshuma/42293.html

推荐访问:cssci css3 cssci2019-2020