CSS中解决文本溢出text-overflow: ellipsis；不生效的问题
墨初 Web前端 1459阅读
在利用css样式代码来限制文本溢出隐藏时，发现使用text-overflow: ellipsis；CSS属性不生效，查了一下关于这方面的知识，发现了有几个需要注意的地方，否则文本不会文本溢出隐藏。
css中文本溢出隐藏不生效的问题
1、没有设置div元素的宽度
如果需要溢出隐藏的文本的上级元素没有设置相应的宽度，则浏览器无法知道在何如截取文本。
例：
<style>
.d{
width: 100px;
}
</style>
<div class="d">需要超出隐藏的文本</div>2、没有设置溢出隐藏
CSS中的属性text-overflow: ellipsis;需要与 overflow: hidden;和 white-space: nowrap;一起使用。
overflow: hidden；用于隐藏超出元素宽度的内容。
white-space: nowrap; 用于防止文本换行。
例：
<style>
.d{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<div class="d">需要超出隐藏的文本</div>3、嵌套元素的问题
如果文本被包在嵌套元素中，需要确保 text-overflow: ellipsis;应用在直接包含文本的元素上。
ps：如果以上都无法解决你的问题，那么就要注意是不是其它的样式覆盖了当前的样式。