CSS 文本溢出处理（单行和多行）

本文介绍了CSS中处理文本溢出的方法，包括单行文本的处理，利用`text-overflow`、`overflow`和`white-space`属性来控制显示和隐藏多余文本；以及多行文本溢出的解决方案，通过`line-clamp`属性限制显示的文本行数，并结合`display`和`flex`属性实现效果。

文章目录

- - 1 单行文本
  - 2 多行文本溢出

1 单行文本

html：

<span>单行文本溢出处理</span>

css：

span{

	display: inline-block;

	width: 100px;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

}


span{
	
	border: 1px solid black;
	
}

效果图：
在这里插入图片描述

注意：

要配合width属性使用，或max-width
span是inline类型的，不能设置宽高，要先display: inline-block;
white-space属性是用来定义元素内的空白该如何处理。
white-space属性值
- normal（默认）：忽略多余的空白，只保留一个空白；
- pre：保留空白（行为方式类似于html中的pre标签）；
- nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
- pre-wrap：保留空白符序列，正常地进行换行；
- pre-line：合并空白符序列，保留换行符；
- inherit：从父元素继承white-space属性的值。

2 多行文本溢出

html：

<span>多行文本溢出处理，多行文本溢出处理，多行文本溢出处理，多行文本溢出处理，多行文本溢出处理，</span>

css：

span{

	width: 100px;

	display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 3;

    overflow: hidden;

}


span{

	border: 1px solid black;
	
}