首页 » Web技术 » HTML/CSS » 正文

CSS强制文字不换行对超出文字隐藏并显示省略号

文字超出隐藏并显示省略号

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>

发表评论