css里面的span和p标签的换行或者不换行问题
有的地方想换行,半天换不了,有的不想换行,又自己动换行。。。。。 坑
涉及到几个参数:
-
word-break:normal;
-
white-space:pre-wrap;
-
word-wrap : break-word ;
-
overflow: hidden ;
-
overflow-wrap : break-word ; 新版替代word_wrap
-
text-overflow
-
width 有时候换行还和宽度有关
1.word-break: 怎样进行单词内的断句
这个就是换行的规则,和换不换行貌似没关系!
- noraml: 默认, 使用浏览器的换行规则
- break-all: 允许在 (非中日文等, 也就是英语什么的) 单词内换行
- keep-all: 只能在半角空格和连字符换行
2.white-space: 如何处理元素中的空白
这个就是用来处理换行的!
- normal: 默认, 被浏览器忽略空白
- pre: 空白被浏览器保留.
- nowrap: 文本不会换行, 会在同一行上继续, 一直走到需要换行为止
- pre-wrap: 保留空白符序列, 但正常换行
- pre-line: 合并空白符序列, 但正常换行
- inherit: 从父元素继承white-space这个属性
3.word-wrap: 是否允许浏览器在单词内断句
这个就是换行的规则,和换不换行貌似没关系!
现在更名为了overflow-wrap
- normal: 默认, 只在允许的断字点换行
- break-word: 在实在找不到换行点的时候, 就断单词换行
4.overflow:
这个也是用来处理换行的!
- visible 默认值。内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
- inherit 规定应该从父元素继承 overflow 属性的值。
5.overflow-wrap:
和3.word-wrap一样
6.text-overflow :
不换行的时候,超出文本怎么显示
- clip 修剪文本。
- ellipsis 显示省略符号来代表被修剪的文本。
- string 使用给定的字符串来代表被修剪的文本。
好多坑都在overflow,正常的理解,overflow就是自己的overflow。其实经常这个要用在父控件才能生效!!!单给自己用不行。
如果一行很长,把其他标签都覆盖了,估计就是父控件的overflow的问题。