文本展示处理

• 1、white-space
• 2、word-break
• 3、word-spacing
• 4、overflow-wrap
• 5、text-overflow
• 6、text-align
  • 6.1 text-align-last
• 7、几种设置溢出效果的方法
  • 7.1 单行或者多行显示点点点
  • 7.2 带点渐变的点点点显示

[toc]

1、white-space

CSS white-space 属性用于设置如何处理元素内的空白字符。空白字符是指用于在其他字符之间提供水平或垂直空间的字符。在HTML、CSS、JavaScript和其他计算机语言中，空格通常用于分隔标记。

常用值

1. normal

   连续的空白符会被合并。源码中的换行符会被当作空白符来处理。并根据填充行框盒子的需要来换行。

2. nowrap

   和 normal 一样合并空白符，但阻止源码中的文本换行。

3. pre

   连续的空白符会被保留。仅在遇到换行符或 <br/> 元素时才会换行。

4. pre-wrap

   连续的空白符会被保留。在遇到换行符或 <br/>元素时，或者根据填充行框盒子的需要换行。

5. pre-line

   连续的空白符会被合并。在遇到换行符或 <br/> 元素时，或者根据填充行框盒子的需要换行。

6. break-spaces

   与 pre-wrap 的行为相同，除了：

   • 任何保留的空白序列总是占用空间，包括行末的。
   • 每个保留的空白字符后（包括空白字符之间）都可以被截断。
   • 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容——min-content——大小和最大内容——max-content——大小）。

2、word-break

CSS 属性 word-break 指定了怎样在单词内断行。

1. normal

   使用默认的断行规则。

2. break-all

   对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。

3. keep-all

   CJK 文本不断行。Non-CJK 文本表现同 normal。

3、word-spacing

设置标签、单词之间的空格长度。

word-spacing: 1rem;
word-spacing: 4px;

4、overflow-wrap

overflow-wrap 应用于行级元素，用来设置浏览器是否应该在一个本来不能断开的字符串中插入换行符，以防止文本溢出其行向盒。

1. normal 行只能在正常的单词断点（例如两个单词之间的空格）处换行。
2. anywhere为防止溢出，如果行中没有其他可接受的断点，则不可断的字符串（如长词或 URL）可能会在任何时候换行。在断点处不会插入连字符。在计算最小内容内在大小时，会考虑由单词换行引入的软换行机会。
3. break-work与 anywhere 值相同，如果行中没有其他可接受的断点，则允许在任意点将通常不可断的单词换行，但在计算最小内容内在大小时不考虑断字引入的软换行机会。

提示

与 word-break相比，overflow-wrap 仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生换行。

5、text-overflow

用于确定如何提示用户存在隐藏的溢出内容。

text-overflow 属性并不会强制“溢出”事件的发生，因此为了能让文本能够溢出容器，你需要在元素上添加几个额外的属性：overflow和 white-space。例如：

overflow: hidden;
white-space: nowrap;

text-overflow 属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联（inline）方向一致（举个反例：文本无法在盒子的下方溢出）。

text-overflow 属性可能被赋予一个或者两个值。如果赋一个值，指的行末溢出行为（从左至右的文本右末端，从右至左的文本左末端）。如果赋两个值，第一个值指定行左端溢出行为，第二个值指定行右端溢出行为。

1. clip 默认值。这个关键字会在内容区域的极限处截断文本，因此可能会在单词的中间发生截断。如果你的目标浏览器支持 text-overflow: ''，为了能在两个单词过渡处截断，你可以使用一个空字符串值（''）作为 text-overflow 属性的值。
2. ellipsis这个关键字会用一个省略号（'…'、U+2026 HORIZONTAL ELLIPSIS）来表示被截断的文本。这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小以至于连省略号都容纳不下，那么这个省略号也会被截断。

让省略号显示在左边， 主要设置 direction: rtl;

text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;

6、text-align

块元素或者单元格框的行内内容的水平对齐，这意味着其效果和 vertical-align 类似，但是是水平方向的。

1. start如果内容方向是左至右，则等于 left，反之则为 right。

2. end如果内容方向是左至右，则等于 right，反之则为 left。

3. left行内内容向左侧边对齐。

4. right行内内容向右侧边对齐。

5. center行内内容居中。

6. justify文字向两侧对齐，对最后一行无效。

7. text-align: justify; text-align-last: justify; 字会撑满宽度

6.1 text-align-last

指定一行或者块中的最后一行在被强制换行之前的对齐规则。属性值和 text-align一样

7、几种设置溢出效果的方法

7.1 单行或者多行显示点点点

/*单行*/
p {
    overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
/*多行*/
p {
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /*行数*/
	overflow: hidden;
}

7.2 带点渐变的点点点显示

/*多行兼容性比较好的方案*/
p {
	position: relative;
	line-height: 20px;
	max-height: 40px;
	overflow: hidden;
}
p::after {
	content: '...';
	position: absolute;
	bottom: 0;
	right: 0;
	padding-left: 40px;
	background: linear-gradient(to right, transparent, #fff 55%);
}