单行悬浮
- 显示一行，超过的部分显示省略号
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
换行显示
- 显示两行，剩下超出的部分显示省略号
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
/* autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
- 一定要给外层 div 设置只显示 2 行的最小高度，不然就变成这个样子
(图片来自 blog.csdn.net/weixin_4329…)
涉及到的 CSS 属性
1. overflow: visible | hidden | scroll | auto | clip (css3)
| 属性值 | 说明 |
|---|---|
| visible | 对溢出内容不做处理，内容可能会超出容器 |
| hidden | 隐藏溢出容器的内容并且不出现滚动条 |
| scroll | 藏溢出容器的内容，溢出的内容可以通过滚动呈现 |
| auto | 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条 |
| clip | 与hidden一样，clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于，clip是一个完全禁止滚动的容器，而hidden仍然可以通过编程机制让内容可以滚动 |
2. text-overflow: clip | ellipsis
| 属性值 | 说明 |
|---|---|
| clip | 当内联内容溢出块容器时，将溢出部分裁切掉 |
| ellipsis | 当内联内容溢出块容器时，将溢出部分替换为（...） |
该属性说明当块容器 <' overflow '> 为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符。
- 要使得 <' text-overflow '> 属性生效，块容器必须显式定义 <' overflow '> 为非visible值，同时显式或者隐式的定义 <' width '> 为非auto值， <' white-space '> 为nowrap值
3. white-space: normal | pre | nowrap | pre-wrap | pre-line
指定元素是否保留文本间的空格、换行；指定文本超过边界时是否换行。
| 属性值 | 说明 |
|---|---|
| normal | 默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。 |
| pre | 原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同 pre 元素效果 |
| nowrap | 与normal值一致，不同的是会强制所有文本在同一行内显示。 |
| pre-wrap | 与pre值一致，不同的是文字超出边界时将自动换行。 |
| pre-line | 与normal值一致，但是会保留文本输入时的换行。 |
4. word-break： normal | keep-all | break-all | break-word
定义元素内容文本的字间与字符间的换行行为。
| 属性值 | 说明 |
|---|---|
| normal | 默认的换行规则。依据各自语言的规则，允许在字间发生换行 |
| keep-all | 对于 CJK（中文，韩文，日文）文本不允许在字符内发生换行。Non-CJK 文本表现同normal |
| break-all | 对于 Non-CJK 文本允许在任意字符内发生换行。 |
| break-word | 与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位 |
9. display: -webkit-box
7. -webkit-box-orient: horizontal | vertical | inline-axis | block-axis 设置或检索伸缩盒对象的子元素的排列方式
| 属性值 | 说明 |
|---|---|
| horizontal | 设置伸缩盒对象的子元素从左到右水平排列 |
| vertical | 设置伸缩盒对象的子元素从上到下纵向排列 |
| inline-axis | 设置伸缩盒对象的子元素沿行轴排列 |
| block-axis | 设置伸缩盒对象的子元素沿块轴排列 |
| ** |
- -webkit-line-clamp** 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
