CSS 换行与断词
换行属性
CSS 里涉及到换行的与断词几个属性晒一晒:
- word-break - 用于处理单词换行和断词规则
- word-wrap - 设置当内容超过指定容器的边界时是否断词
- white-space - 设置空格处理方式
word-break
word-break：normal | keep-all | break-all
word-break 用于处理单词换行和断词规则，取值为:
- normal - 使用浏览器默认的换行规则
- keep-all - 单词太长，换行 + 溢出
- break-all - 单词太长，断词
-
normal：
iamalonglonglonglonglonglonglonglonglongword
-
keep-all：
iamalonglonglonglonglonglonglonglonglongword
-
keep-all：
This is a very looooooooooooooooooooooooog word
-
break-word：
iamalonglonglonglonglonglonglonglonglongword
-
break-word：
This is a very looooooooooooooooooooooooog word
word-wrap
word-wrap：normal | break-word
word-wrap 设置当内容超过指定容器的边界时是否断词，取值为:
- normal - 单词太长，换行 + 溢出
- break-word - 单词太长，换行 + 断词
-
normal：
This is a very looooooooooooooooooooooooog word
-
break-word：
This is a very looooooooooooooooooooooooog word
white-space
white-space：normal | pre | pre-wrap | pre-line | nowrap
white-space 设置空白处理方式，取值为:
- normal - 默认浏览器处理方式
- pre - 保留所有的空格和回车，且不允许换行
- pre-wrap - 保留所有的空格和回车，但是允许换行
- pre-line - 会合并空格，且允许换行
- no-wrap - 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇 br 对象
-
normal：
轻轻地我走了 正如我轻轻地来
-
pre：
轻轻地我走了（这里接很多测试文字） 正如我轻轻地来
-
pre-wrap：
轻轻地 我走了（这里接很多测试文字） 正如我轻轻地来
-
pre-line
轻轻地 我走了（这里接很多测试文字） 正如我轻轻地来
-
nowrap：
轻轻地我走了 正如我轻轻地来
配合 text-overflow 样式，取值为:
- clip - 当内联内容溢出块容器时，将溢出部分裁切掉
- ellipsis - 当内联内容溢出块容器时，将溢出部分替换为(…)
-
clip：
轻轻地我走了 正如我轻轻地来
-
ellipsis：
轻轻地我走了 正如我轻轻地来
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
-webkit-line-clamp
-webkit-line-clamp 属性可以把块容器中的内容限制为指定的行数，它只有在 display 属性设置成 -webkit-box/-webkit-inline-box 并且 -webkit-box-orient: vertical 时才有效果。在大部分情况下，也需要设置 overflow: hidden, 否则，里面的内容不会被裁减，并且在内容显示为指定行数后还会显示省略号(ellipsis):
强制两行省略的话，可以这样写:
.item {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
块级 / 内联
在文档流里，会涉及到块级元素(block-level elements)和内联元素(inline elements)，区别为:
| 区别 | 块级元素 | 内联元素 |
|---|---|---|
| display | block | inline |
| 行显示 | 独占一行 | 在一行显示，直到排满 |
| 宽高 | 支持 width、height 属性 | 不支持 width、height 属性 |
| 补白 | 支持 padding、margin 属性 | 不支持 padding、margin 竖直方向的属性 |
| 元素类别 | div、form、h1~h6、li、p 等 | a、span、input 等 |
通过 display 属性可以设置元素的布局行为，相关常用的取值为:
- none - 隐藏对象，与
visibility: hidden不同，该值不保留隐藏对象的物理空间 - inline - 指定对象为内联元素
- block - 制定对象为块级元素
- inline-block - 指定对象为内联块元素，呈现为 inline 对象，但是对象的内容作为 block 对象呈现
- flex - 将对象作为弹性伸缩盒显示，详细请查看 flex 布局
display：none | inline | block | inline-block | flex | (...)