微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css 字多出来是省略号

CSS 字多出来是省略号,是因为文本内容过长,超出了所在的元素宽度,此时CSS为了保证页面的整体美观,就会自动地将多余的文本内容省略掉,并用省略号代替。

css 字多出来是省略号

如下代码所示,当文本内容超出了它所在div元素的宽度时,CSS会自动将多余的文本内容省略掉,并用省略号代替:

div{
    width: 150px;
    white-space: Nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

CSS提供了三个属性来实现这个功能white-spaceoverflowtext-overflow。其中:white-space: Nowrap表示禁止文本换行;overflow: hidden表示隐藏溢出部分的内容text-overflow: ellipsis表示使用省略号代替溢出部分的内容

需要注意的是,这种省略号只会出现在块级元素上,行内元素不支持省略号。此外,IE浏览器的早期版本不支持以上属性,需要使用-ms-text-overflow: ellipsis;来实现省略号效果

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。