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

发布时间：2020-12-14 23:51:04 所属栏目：资源来源：网络整理

导读：虽然该方法记得，但是每次要用的时候总是不能想起来，因此记录下。实现直接上代码，首先是html的部分：body pHello World Hello World Hello World Hello World/p/body 然后附上样式： style type="text/css"p { width: 150px; text-overflow: ellipsis; /

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

实现

直接上代码，首先是html的部分：
<body>
    <p>Hello World Hello World Hello World Hello World</p>
</body>

然后附上样式：

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

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

该方法可以兼容到IE7，IE6没有环境，所以没有尝试。

注：在IE7或8上你可能会发现开始截断的位置与其他情况下不同，请注意设置相同的字体，不同的字体会使字母的大小不统一。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!