css文本溢出隐藏并显示省略符号

一、单行文本溢出

二、多行文本溢出

---

一、单行文本溢出

/* 固定宽度 */
width: 200px;

/* 强制文字不换行 */
white-space:nowrap ;

/* 将溢出部分进行隐藏 */
overflow: hidden;

/* 溢出文本转换为省略号 */
text-overflow: ellipsis;

二、多行文本溢出

/* 固定宽度 */
width: 200px;

/* 将溢出的部分隐藏 */
overflow: hidden;

/* 把盒子作为弹性盒子显示 */
display: -webkit-box;

/* 让子元素垂直排列 */
-webkit-box-orient: vertical;

/* 设置元素显示的行数 */
-webkit-line-clamp: 2; 

多行文本溢出的解决方案同样也适用于单行文本溢出，只需要将元素显示的行数设置为1即可： -webkit-line-clamp: 1;。