CSS溢出隐藏 单行、多行隐藏 一行半

在CSS中，可以使用text-overflow属性来处理文本溢出的情况。对于单行和多行文本的溢出隐藏，以及一行半的隐藏，可以分别设置overflow和text-overflow属性。

单行隐藏溢出文本:

.single-line-ellipsis {
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 添加省略符号表示文本被截断 */
}

多行隐藏溢出文本:

.multi-line-ellipsis {
  overflow: hidden; /* 隐藏溢出的内容 */
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  -webkit-box-orient: vertical; /* 垂直方向的子元素排列 */
  text-overflow: ellipsis; /* 添加省略符号表示文本被截断 */
}

一行半隐藏溢出文本，可以使用伪元素和绝对定位来实现:

.half-line-ellipsis {
  position: relative;
  line-height: 1.5; /* 设置行高 */
  height: 3em; /* 容器高度为3em */
}
 
.half-line-ellipsis::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 5px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

HTML 使用示例:

<div class="single-line-ellipsis">这是一个单行文本，溢出内容会显示为省略符号。</div>
<div class="multi-line-ellipsis">这是一个多行文本，溢出内容会显示为省略符号。这使得我们可以很好地控制文本的显示，而不会导致布局的问题。</div>
<div class="half-line-ellipsis">这是一个试图在一行的一半显示文本，溢出内容会显示为省略符号。</div>

以上CSS类可以应用于HTML元素中，实现文本溢出时的隐藏效果。