css里面的span和p标签的换行或者不换行问题

css里面的span和p标签的换行或者不换行问题

有的地方想换行，半天换不了，有的不想换行，又自己动换行。。。。。 坑

涉及到几个参数：

1. word-break:normal;

2. white-space:pre-wrap;

3. word-wrap : break-word ;

4. overflow: hidden ;

5. overflow-wrap : break-word ; 新版替代word_wrap

6. text-overflow

7. 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的问题。