2019-06-02—定义两行文本，超出显示省略号

之前一直用的是一行文本超出显示省略号，突然有一个需求是超出两行文本显示省略号，查了一下，找到答案，不过只被谷歌支持

一行文本：

width: 200px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

两行文本

width: 100px;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;    //必须要有； 将对象作为弹性伸缩盒子模型显示。

-webkit-line-clamp:2;    //可以设置3行，4行

-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

---

重新补习了一下white-space和word-break

white-space即处理元素内的空白，pre空白被浏览器保留；nowrap不换行，直到遇到br标签为止；另外几个没用到过所以暂且不写

word-break即自动换行的处理方法，break-all允许在单词内换行；keep-all只能在半角空格或连字符处换行【很神奇的是文本中有“：”也会换行】

这些知识点都可以在w3c中查到，但是好像真的遇到问题了，会仔细阅读每个属性的含义，其他情况下只要能达成自己想要的效果就算过去了。