css 一行超出显示省略号多行超出显示省略号

一行超出显示省略号

.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

规定当文本溢出包含元素时发生的事情

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

多行超出显示省略号

.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 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。