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

CSS溢出隐藏是一种常用的技术，用于在元素内容超出其容器大小时，控制内容的显示方式。单行隐藏指的是在容器内部只显示一行文本，超出一行的部分隐藏。多行隐藏则是在容器内部有多行文本时，将超出容器高度的文本隐藏起来。一行半隐藏是指在容器内部只显示一行文本，超出一行的部分隐藏，并显示省略号。

代码实现：

要实现单行隐藏、多行隐藏和一行半隐藏，可以使用CSS属性overflow和text-overflow结合。以下是代码示例：

单行隐藏：

.container {
  width: 200px; /* 容器宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行隐藏：

.container {
  height: 100px; /* 容器高度 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
}

一行半隐藏：

.container {
  width: 200px; /* 容器宽度 */
  display: -webkit-box;
  -webkit-line-clamp: 1.5; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

总结：

CSS溢出隐藏是通过设置容器的overflow属性来实现的，结合其他属性如text-overflow可以实现单行隐藏、多行隐藏和一行半隐藏。单行隐藏可以通过设置white-space为nowrap来限制文本只显示一行，并使用text-overflow的ellipsis属性显示省略号。多行隐藏可以通过设置-webkit-line-clamp来控制显示的行数。