一行超出显示省略号
.word{width: 200px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
white-space
属性值:
normal : 忽略多余的空白,只保留一个空白(默认);pre : 保留空白(类似于html中的pre标签);nowrap : 只保留一个空白,文本不会换行,会在同一行继续,直到遇到br标签为止;pre-wrap : 保留空白符序列,正常地进行换行;pre-line : 合并空白符序列,保留换行符;inherit : 父元素继承white-space属性的值;
<div style="width:160px;border:1px solid;white-space:normal;">醉后不知天在水，满船清梦压星河。</div><div style="width:160px;border:1px solid;white-space:nowrap;">醉后不知天在水，满船清梦压星河。</div><div style="width:160px;border:1px solid;white-space:pre;">醉后不知 天在水，满船清梦 压星河。</div><div style="width:160px;border:1px solid;white-space:pre-wrap;">醉后不知天在水，满船清梦压星河。</div><div style="width:160px;border:1px solid;white-space:pre-line;">醉后不知天在水，满船清梦压星河。</div>
text-overflow
规定当文本溢出包含元素时发生的事情
多行超出显示省略号
.word{white-space: nowrap; // 溢出不换行text-overflow: ellipsis;display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示-webkit-line-clamp: 3; // 将对象作为弹性伸缩盒子模型显示。-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）overflow: hidden;}
display: -webkit-box;
1.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。
2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。
3.box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz)、opera(-0)、chrome/safari（-webkit)。
具体参考:css3中的display：-webkit-box的用法_csdn_chenli-CSDN博客
-webkit-line-clamp:3;
-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
