CSS 中实现文本超出部分省略的效果

CSS 中使用 text overflow: 可以设置文字超出部分的显示效果，其中属性值 ellipsis 可将超出部分的文字显示为省略号。

在 Flex 布局下为弹性盒子设置文字省略效果时需注意以下事项：

1. 弹性盒子本身或父级设置宽度（若父级有宽度则弹性盒子可以被内容撑开）
2. 若不想给弹性盒子设置具体宽度，可以给出以下属性：

   flex: 1;
   width: 0；
   

3. 设置文字不换行显示，超出部分省略并隐藏：

   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   

完整 CSS 代码：

.father{
    display: flex;
    width: 200px;
    border: 1px solid #000;
}
.son{
    flex: 1;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

后续项目中我又发现了需要将文字显示两行，并在最后一行结尾显示省略效果的需求，具体实现的方法为：

.ellipsis-2 {
	 overflow: hidden;
	 text-overflow: ellipsis;
	 display: -webkit-box;
	 -webkit-line-clamp: 2;
	 -webkit-box-orient: vertical;
}