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>