css单行/多行 超出部分多行文本溢出隐藏

单行文本溢出

css单行/多行 超出部分多行文本溢出隐藏_第1张图片

aaaaaaaaaaaaaaaaaaaaaaaaaaaa
.box { width: 100px; height: 50px; background-color: pink; .text { /* 文本溢出 */ white-space: nowrap; /* 不换行 溢出隐藏 */ overflow: hidden; /* 超出部分显示省略号 */ text-overflow: ellipsis; /* 块级元素 */ display: block; } }

多行文本溢出

css单行/多行 超出部分多行文本溢出隐藏_第2张图片

时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间时间
.box { width: 100px; height: 50px; background-color: pink; .text { /* 多行文本溢出 */ /* 块级元素 */ display: -webkit-box; /* 溢出隐藏 */ overflow: hidden; /*超出显示省略号 */ text-overflow: ellipsis; /* 垂直排列 */ -webkit-box-orient: vertical; /* 显示两行 */ -webkit-line-clamp: 2; } }

你可能感兴趣的:(css,前端,javascript)