css文字换行

目录

一、英文或数字

word-warp

word-break

二、文本

white-space

tips

三、单行文本超出隐藏并显示省略号

四、多行文本超出隐藏并显示省略号

---

一、英文或数字

word-warp

设置或检索当内容超过指定容器的边界时是否断行

属性值	说明
normal	自动换行（默认值，只在允许的断字点换行）
break-word	强制换行(决定是否允许单词(abcdefj)内断句的。如果不允许的话，长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。 以单词作为换行依据

word-break

属性值	说明
normal	自动换行（默认值）
break-all	允许在单词内换行(不会尝试把长单词挪到下一行，而是直接就进行单词内的断句。 以字母作为换行依据
keep-all	只能在半角空格或连字符处换行

二、文本

white-space

属性值	说明
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

tips

• word-warp和word-break定义长单词或URL地址是否换行到下一行
• 需要指定盒子的width（宽度），否则换行或不换行不生效

三、单行文本超出隐藏并显示省略号

.div{
  overflow: hidden;
  text-overflow: ellipsis;//省略号
  white-space: nowrap;
}

四、多行文本超出隐藏并显示省略号

div{
  overflow: hidden; 
  text-overflow: ellipsis;
  display: -webkit-box;  
  -webkit-box-orient: vertical; // 从上到下垂直排列子元素
  -webkit-line-clamp: 2;// 显示两行内容
}