CSS文字溢出省略号，单行省略号，多行省略号

最新推荐文章于 2024-07-24 10:23:02 发布

m0_61619195

最新推荐文章于 2024-07-24 10:23:02 发布

阅读量343

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_61619195/article/details/125392919

版权

本文介绍了如何使用CSS样式实现文本超出固定宽度时显示省略号的效果，包括单行和多行文本的处理方法。通过设置`overflow:hidden`，`white-space:nowrap`，`text-overflow:ellipsis`以及`-webkit-line-clamp`等属性，可以轻松地对文本进行省略号处理，确保页面布局的整洁和美观。

摘要由CSDN通过智能技术生成

有些时候在文章列表的页面，文章标题只要显示固定宽度，那么我们就需要把多余的文字省略掉，这个时候就需要用省略号处理。

一、单行省略号设置

<style>
.text{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 150px;
  border:1px solid #ccc;
  padding:10px;
}
</style>
<div class="text">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>

一、多行省略号设置

<style>
.text{

  width: 200px;
  border:1px solid #ccc;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置最多显示几行 */
  -webkit-box-orient: vertical;
}
</style>
<div class="text">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>