前言

做前端的展示除了交互，图片展示还有一些文字展示，文字的多寡有的时候是我们预想不到的，所以这里整理一些关于文字展示可能用到的知识点。

单行文字省略

只有块状元素才可以设置省略，而且我们需要设置它的宽度。

1
2
3

overflow: hidden;
text-overflow: ellipsis; // 规定当文本溢出时显示省略符号来代表被修剪的文本
white-space: nowrap; // 设置文字在一行显示不能换行

white-space属性属性指定元素内的空白怎样处理。有四个值可选

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的`<pre>`标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到`<br>`标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

text-overflow属性规定当文本溢出包含元素时发生的事情。

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

多行文字省略

two-line {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 限制块元素显示的文本的行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

单行文字居中

单行文字居中用到的属性是text-align: center;
当要上下居中时设置行高即可，line-height属性。

多行文字上下左右居中

多行文字上下左右居中用到了盒子的flex布局。

1
2
3

display: flex;
align-items: center; // 弹性盒子元素在该行的侧轴（纵轴）上居中放置
justify-content: center; // 项目位于容器的中心