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