文字超出隐藏并显示省略号
text-overflow在使用ellipsis属性时,必须与overflow:hidden; white-space:nowrap; width:150px;这三个样式共同存在时,才会出现省略号的效果,其中overflow: hidden;是自动隐藏文字,text-overflow: ellipsis;是文字隐藏后添加省略号,white-space: nowrap;是强制不换行,width宽度属性根据你的实际宽度需要填写,其它样式是固定的。
在CSS中加入样式:
.test { overflow: hidden;/*自动隐藏文字*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/ width:150px;/*超过指定宽度时隐藏*/ }
或者直接在html中引用样式:
<style type="text/css"> .test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;} </style> <div class="test">CSS强制文字不换行对超出部分隐藏并显示省略号</div>
发表回复