关于文本省略号--css篇

一、单行文本省略

width:value;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

二、多行文本省略

display: -webkit-box; 
display: -moz-box;  
white-space: pre-wrap; 
word-wrap: break-word;
overflow: hidden; 
text-overflow: ellipsis; 
-webkit-box-orient: vertical; 
-webkit-line-clamp:2;   /*显示行数*/

三、white-space属性

默认为white-space:normal。表示合并空格，多个相邻空格合并成一个空格，在源码中的换行作为空格处理，只会根据容器的大小进行自动换行。

white-space:nowrap。不换行，合并空格，但是不会根据容器大小换行，表示不换行。

white-space:pre。保留空格不换行，保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和<br/>标签。

white-space:pre-wrap。保留空格换行，保留空格，并且除了碰到源码中的换行和<br/>会换行外，还会自适应容器的边界进行换行。

white-space:pre-line。合并空格换行，换行和white-space:pre-wrap一样，遇到源码中的换行和<br/>会换行，碰到容器的边界也会换行。

white-space属性表

white-space属性	源码空格	源码换行	<br>换行	容器边界换行
normal	合并	忽略	换行	换行
nowrap	合并	忽略	换行	不换行
pre	保留	换行	换行	不换行
pre-wrap	保留	换行	换行	换行
pre-line	合并	换行	换行	换行

 

word-wrap 属性允许长单词或 URL 地址换行到下一行。word-wrap：normal（默认）|break-word normal：允许内容顶开指定的容器边界，如果单词超长，会冲出边界（在当前行显示，不会换行）。 break-word： 内容将在边界内换行，当单词在当前行放不下时，会自动切换到下一行，必要时会触发word-break（注意：请分辨清楚word-break和break-word这俩个是不同的东西，一为属性另为参数）。 注：各个浏览器均能识别。

box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：

horizontal | vertical | inline-axis | block-axis | inherit

其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。

扩展： box-direction, box-align, box-pack, box-lines。详见https://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/

-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

        -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

         display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

        -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。