css文字换行_css 换行

作者：Monodyee | 2024-03-15 15:00:18

踩

css 换行

一、英文或数字

一、英文或数字

word-warp

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

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

属性值

说明

normal

自动换行（默认值，只在允许的断字点换行）

break-word

强制换行(决定是否允许单词(abcdefj)内断句的。如果不允许的话，长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。

以单词作为换行依据

word-break

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

属性值

说明

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;// 显示两行内容
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/242055