本文的诞生全是因为我大意了,没有闪(没记住),所以写篇文章提醒自己,希望下次搜索文章就会命中再次忘了的我(最好不再有)

单行文本溢出

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

overflow: hidden -- 超出元素的内容会被裁剪

text-overflow:ellipsis -- 文本超出内容替换为...

white-space: nowrap -- 连续的空白符会被合并,文本内的换行符无效.(可以理解为不换行)

多行文本溢出

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

display: -webkit-box -- 将对象作为弹性伸缩盒子模型显示

-webkit-box-orient:vertical -- 设置伸缩盒对象的子元素的排列方式

-webkit-line-clamp: 2 -- 限制在一个块元素中显示的文本的行数

最后

如果多行文本换行不生效了,你是不是又是随手输入内容测试了!

文本换行生效是需要有空白符的,不然会被识别为一个单词从而不生效!

首先确保你的句子单词从中间断开意思会不会改变或者有没有影响,没有的话请加上这句

{
  word-break:break-all; // 意思是单词在必要时可以从中间强制换行
  //mdn解释:对于 non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。
}

顺便说一下其他的

自动换行

{
  word-wrap: break-word;
  word-break: normal; // 使用默认的断行规则。
}

mdn没搜到,菜鸟倒是有

word-wrap 属性允许长的内容可以自动换行。

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。