0%

使用 CSS 控制需隐藏的文字

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

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

点击此处测试各个属性添加或不添加所造成的影响:http://jsfiddle.net/interjc/ZsvBL/