CSS中解决文本溢出text-overflow: ellipsis;不生效的问题
墨初 Web前端 1434阅读
在利用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:如果以上都无法解决你的问题,那么就要注意是不是其它的样式覆盖了当前的样式。