64.《单多行文本溢出处理方案》

---

title: 《单多行文本溢出处理》
date: 2021-03-07 16:32:35
tags:

---

文本溢出处理

1、单行文本溢出处理

注意：

• 必须限制容器的宽度

• 使文本在一行显示

  • white-space属性 nowrap 强制不换行

• 设置盒子溢出隐藏

  • overflow：hidden

• 设置文字超出如何进行处理

  text-overflow属性

  • clip 超出部分直接裁剪
  • ellipsis 文字超出部分隐藏且以省略号代替

代码示例：

html

<p>
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
</p>

css

<style>
	p{
	  	width:200px;
	  	white-spance:nowrap;
	  	border: 1px solid red;
	  	text-overflow: ellipsis;
	  	overflow:hidden;	
	}
</style>

2、多行文本溢出处理

（1）利用webkit私有属性处理(只有webkit内核的浏览器生效)

• 限定容器的宽度
• 使用 webkit私有属性设置显示行数

-webkit-line-clamp: 想要显示的行数；

• 单独使用-webkit-line-clamp属性是不行的，还需要配合一下属性：

  display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/ -webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/
  

• 给盒子设置溢出隐藏

  完整代码如下：

  html

  <p>
  	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
  	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
  	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
  	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
  	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
  </p>
  
  

  css

  p{
     width:200px;
     border: 1px solid red;
     -webkit-line-clamp: 3;
     display: -webkit-box;
     -webkit-box-orient: vertical;
  }
  

（1）利用伪元素模拟溢出显示省略号的效果（兼容性比较好）

• 限定容器的宽度
• 设置盒子的高度与行高成倍数关系，这里的倍数关系如果是2倍，则显示2行内容
• 使用伪元素显示省略号，并定位到合适的位置（伪元素绝对定位，父元素相对定位）
• 使用背景颜色和padding进行微调，遮盖结尾处的文字
• 设置盒子溢出隐藏

完整代码如下：

html

<p>
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
	文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了文本溢出了
</p>

css

p{
  position:relative;
  width:200px;
  border:1px solid red;
  height:60px;
  line-height:30px;
}
p::after{
	position:absoult;
	right:0,
	bottom:0,
	background-color:white;
}