See the Pen text-overflow: ellipsis by MOxFIVE (@MOxFIVE) on CodePen.
## 单行省略 ### 样式代码 ```html CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default. ``` ```css span { display: block; width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } ``` ### 代码简析 ``` stylus text-overflow: ellipsis； // [必需], 文本溢出时显示省略号(…) display: block; // [可选], `ellipsis` 只应用于 `block containers`（块级容器）， // 如果所在 HTML 标签非块级，那需要设置 `display` 属性 white-space: nowrap; // [必需], 将文本限制在一行内 overflow: hidden; // [必需], 隐藏溢出的内容 // 可按需要仅设置 `overflow-y` 或 `overflow-x` width: 14em; // [可选], 限制容器宽度 // 可使用 `max-width` ``` ## 多行省略 在指定行数后，才使用省略号代替溢出文本，这可以借助 `-webkit-line-clamp` 属性实现 - -webkit- 内核属性，不支持 IE 和 Firefox 浏览器 [查看兼容性](http://caniuse.com/#search=-webkit-line-clamp) ### 样式代码 ```htmlCSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.
``` ```css p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 15em; line-height: 1.5; text-overflow: ellipsis; overflow : hidden; } ``` ### 代码简析 ``` less // 必需的属性 display: -webkit-box; // 将元素设为弹性盒模型 -webkit-line-clamp: 2; // 文本最大行数 -webkit-box-orient: vertical; // 模型内元素垂直排列 text-overflow: ellipsis; overflow : hidden; // 可选的样式 width: 15em; // 限制容器宽度 line-height: 1.5; // 建议增大行高，避免文字被腰斩 ``` ## 相关链接 1. ***多行文本溢出显示省略号(…)全攻略*** by **愚人码头** on2014/09/30: 2015/07/07: