[随手记]css实现超出元素宽度的内容变为...

需求:超出元素宽度的内容变为…

1,超过一行…

/* 给元素设置一定宽度 */
width: 1rem;
/* 禁止换行 */
/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 	显示省略符号(...)来代表被修剪的文本 */
text-overflow: ellipsis;

2.超过两行…（注意这时候元素height值不能设置的小于两行的高度）

-webkit-line-clamp: 2;

display: -webkit-box;

-webkit-box-orient: vertical;

overflow: hidden;

text-overflow: ellipsis;