html文本超出部分显示省略号（偶尔失效）

最新推荐文章于 2025-06-10 12:41:12 发布

前端小仙女儿

最新推荐文章于 2025-06-10 12:41:12 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css 文章标签：文本超出显示省略号文本超出显示省略号失效

本文链接：https://blog.youkuaiyun.com/qq_40592359/article/details/82864521

html+css 专栏收录该内容

2 篇文章

订阅专栏

探讨CSS中实现文本超出两行或三行后显示省略号的方法，解决实际应用中遇到的问题，如元素脱离文档流导致样式失效，并介绍white-space属性的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前每次写文本超出显示省略号的样式都是在网上百度的这次也是但效果没有达到预期的那样（就是失败了。。。。）
这是我百度到的代码

<title>文字超过两行或三行就显示省略号</title>
<style type="text/css">
.p1{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<p class="p1">
动机客户赶快交电话费开发将对方很高科技的化工科技和登记客户对方更好看的恢复规划的国际化考核得分科技化工等客观和登记和高科技好读后感京东框架读后感动机客户赶快交电话费开发将对方很高科技的化工科技和登记客户对方更好看的恢复规划的国际化考核得分科技化工等客观和登记和高科技好读后感京东框架读后感动机客户赶快交电话费开发将对方很高科技的化工科技和登记客户对方更好看的恢复规划的国际化考核得分科技化工等客观和登记和高科技好读后感京东框架读后感动机客户赶快交电话费开发将对方很高科技的化工科技和登记客户对方更好看的恢复规划的国际化考核得分科技化工等客观和登记和高科技好读后感京东框架读后感
</p>
</body>

---------------------

本文来自 swpu_lwf 的优快云 博客 ，全文地址请点击：https://blog.youkuaiyun.com/liwenfei123/article/details/69666880?utm_source=copy

但是我用在我的代码中是失效的后来我发现加上这个就可以了