CSS 溢出截断

在网页设计中，经常会遇到需将长串文字截断显示的情况，这就需要用到 CSS 的溢出截断属性了。

文字溢出截断

在 CSS 中，我们可以使用 text-overflow 属性来实现文字的溢出截断。

实现方式

/* 单行溢出截断 */
.overflow {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 多行溢出截断 */
.overflow {
  display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
  -webkit-line-clamp: 3; /* 显示的行数 */ 
  -webkit-box-orient: vertical; /* 水平排版*/
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

示例

以下为单行溢出截断的例子。

<div class="overflow">超出长度的文字超出长度的文字超出长度的文字超出长度的文字</div>

效果如下：

以下为多行溢出截断的例子。

<div class="overflow">
  超出长度的文字超出长度的文字超出长度的文字超出长度的文字
  超出长度的文字超出长度的文字超出长度的文字超出长度的文字
  超出长度的文字超出长度的文字超出长度的文字超出长度的文字
</div>

效果如下：

图片溢出截断

除了文字外，图片也可能存在需要截断的情况。在 CSS 中，我们可以使用 overflow 属性来实现图片的溢出截断。

实现方式

/* 溢出截断 */
.overflow {
  width: 100px; /* 设置宽度 */
  height: 100px; /* 设置高度 */
  overflow: hidden; /* 隐藏溢出部分 */
}

示例

以下为图片溢出截断的例子。

<div class="overflow"><img src="https://via.placeholder.com/400x400" alt=""></div>

效果如下：

总结

CSS 中的溢出截断属性，可以方便实现长文本或图片的截断显示。在使用时需要根据实际情况进行设置，从而达到最佳效果。

以上为介绍内容，将会返回 markdown 格式的文本。