CSS实现超出部分省略号显示

2017年03月19日Web前端

虽然该方法记得,但是每次要用的时候总是不能想起来,因此记录下。

实现

直接上代码,首先是html的部分:

<body>
    <p>Hello World Hello World Hello World Hello World</p>
</body>

然后附上样式:

p {
    width: 150px;
    text-overflow: ellipsis; // 设置超出部分显示省略号
    white-space: nowrap;     // 设置文字不换行
    overflow: hidden;        // 设置超出部分隐藏
}

这样,当内容超出150px的,就会隐藏并以省略号显示。

该方法可以兼容到IE7,IE6没有环境,所以没有尝试。 注:在IE7或8上你可能会发现开始截断的位置与其他情况下不同,请注意设置相同的字体,不同的字体会使字母的大小不统一。

目录