css换行与不换行

摘要：css 实现换行与不换行

white-space

其值：normal|pre|nowrap|pre-wrap|pre-line|inherit; 属性设置如何处理元素内的空白

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

word-wrap

normal|break-word; 用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

• normal: 只在允许的断字点换行(浏览器保持默认处理)
• break-word:在长单词或 URL 地址内部进行换行

word-break

normal|break-all|keep-all; 用来标明怎么样进行单词内的断句。

• normal：使用浏览器默认的换行规则。
• break-all:允许再单词内换行
• keep-all:只能在半角空格或连字符处换行

省略号显示超出文本

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 160px;

---

默认情况下：
我们发现连续数字和连续字母不进行换行，而是会撑破盒子；

默认情况【中文】：

我是一段很长的 文字我是一段很长 的文字我是一段很长的文字

有空格的英文：

When did I say we could run through the rain and not get wet?

连续英文：

WhendidIsaywecouldrunthroughtherainandnotgetwet?

有空格的数字：

123456789456123 4567 8945612 345678 94123

连续数子：

1234567894561234567894561234567894123

强制不换行方法：

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

中文：

我是一段很长的 文字我是一段很长的文字我是一段很长的文字

中文：

我是一段很长的 文字我是一段很长的文字我是一段很长的文字

有空格的英文：

When did I say we could run through the rain and not get wet?

有空格的数字：

123456789456123 4567 8945612 345678 94123

强制换行方法：

div {
    word-break: break-all;
}

*注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

连续英文：

WhendidIsaywecouldrunthroughtherainandnotgetwet?

连续数子：

1234567894561234567894561234567894123