hi,欢迎访问本站!
当前位置: 首页Web前端正文

CSS中解决文本溢出text-overflow: ellipsis;不生效的问题

墨初 Web前端 591阅读

在利用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:如果以上都无法解决你的问题,那么就要注意是不是其它的样式覆盖了当前的样式。

声明:无特别说明,转载请标明本文来源!
相关推荐