web开发中换行以及换行属性的示例分析

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

小编给大家分享一下web开发中换行以及换行属性的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

关于换行以及换行属性

对于CSS的white-space属性，我想大部分人应该和我差不多，最常用的就是nowrap属性，最多用来做超长省略号显示的时候会用到【hiahiahia~】

起因是这样的：产品doggie策划了一个元旦活动，活动主页最下边需要显示配置的活动规则，注意，是配置的活动规则，所以，免不了运营小妹要在后台配置一个活动规则，肯定不指望她们能配置html文本的呀，对吧，于是她们配置的是这样的：

1、封垫苏菲房间都是克拉夫；
    2、对方萨芬的刷分放大；
    3、粉打发打发打发

这样色的，于是，取数据的时候，那隐藏的换行符免不了就被带走了~走了~了，它就变成了一个真正的，换行符。就像word文档里面看见的那样

于是，页面呈现与DOM结构就变成了这样

显然，这不是我们真实想要它呈现的效果，我们当然是想它能聪明的在该换行的时候换行呀，对吧，那么问题来了，为什么，它没有换行呢？

换行符

阿望脑袋里能记下来的换行符一共有4种

\n：最初接触\n，是学C语言换行的时候，释义为：输入完一行内容后，光标转到下一行的起始位置
\r\n：回车换行（回车：回车就是把水平位置复位，换行：换行就是往下一行，不改变水平位置，可以想象一下，在word文档中点击键盘回车键，其实执行的是回车+换行的操作）
<br />：这个换行符是HTML唯一能识别的换行标签
?：word文档软回车标记

当然，除了这几种，不同的语言可能会有它们自己的换行符，比如C++的endl，VB的空格+下划线

百度百科显示，word换行符是一种换行符号，它的作用是换行显示，但是它不是真正的段落标记，它的换行不是真正意义上的重起一段，因此被换行符分割的文字其实仍然还是一个段落中的，word中基于段落的所有操作都是不会识别换行符为段落结尾的，再加上在HTML中，只能识别br标签来做基本的文本换行，所以，这也就是文章开头说的，为什么word软回车换行符不能在HTML中正确回车显示了。

HTML中的换行

在HTML中，换行可以有以下几种办法

块级元素包裹

这个就不多做解释了，块级元素最基本的定义就是一般都从新行开始，相邻的块级元素将会在不同行显示，默认了它的换行行为

br 标签

br 是HTML中默认的、唯一的可识别的换行元素，在要换行的地方加进去就行，它是一个自闭合标签

pre 标签

来，解释一下上面才说了br 是HTML中默认的、唯一的可识别的换行元素，怎么突然有冒了个pre标签出来！

pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体，所以，并不是因为它被识别成了换行元素才导致换行，而是因为，它保留了文本节点最原始的格式，你给我什么，我还你什么，而不是像其他的元素，你给我充满换行符合空格的文本，我给你被我压缩压缩再压缩的瘦身版文本

友情提示：它不仅可以保留换行格式，还可以保留你的多个空格噢，因为pre元素默认带有样式 white-space: pre;

举个栗子

<pre>
        1、封垫苏菲房间都     是克拉夫；
        2、对方萨芬的刷分放大；
        3、粉打发打发打发
    </pre>

    // 显示
    1、封垫苏菲房间都     是克拉夫；
    2、对方萨芬的刷分放大；
    3、粉打发打发打发

    <div>
        1、封垫苏菲房间都     是克拉夫；
        2、对方萨芬的刷分放大；
        3、粉打发打发打发
    </div>

    // 显示
    1、封垫苏菲房间都 是克拉夫； 2、对方萨芬的刷分放大； 3、粉打发打发打发

鉴于对pre标签的无知，在阿望还在做JSP的时候，遇到这种换行的需求通常都是正则表达式将换行符转换成br标签，然后通过HTML（vue的v-html）渲染成换行的DOM节点，相信也是大多数人的第一选择

'我的字符串1\r\n\r\n\r\n\r\n我的字符串2\r\n111'.replace(/\r\n/g, '<br />')

现在想来，当初那些前辈们教下来的也是这个办法，估计，他们也没想到，一行CSS代码就能解决吧。。。

CSS属性换行

我们假设有个超长的文本节点："哈哈哈，congratulations"，我们假设有个容器长度只能装得下"哈哈哈，con"

word-break

word-break 属性规定自动换行的处理方法，可以让浏览器实现在任意位置的换行，它是CSS3推出的新属性（有兼容性问题），用来标明怎么样进行单词内的断句

什么叫单词内的断句呢？简单点来说，就是当文本节点"哈哈哈，congratulations"在容器中显示成了"哈哈哈，con[假设这里换了行]gratulations"的时候，就产生了单词内断句。浏览器默认的时候，"哈哈哈，congratulations"在容器中会显示成"哈哈哈，[假设这里换了行]congratulations"，即：如果有一个单词很长，导致一行中剩下的空间已经放不下它时，则浏览器会把这个单词挪到下一行去

word-break一共有三个属性值

normal 浏览器默认的换行规则

"哈哈哈，congratulations"在容器中会显示成"哈哈哈，[假设这里换了行]congratulations"

break-all 允许在单词内换行（单词是指non-CJK (CJK 指中文/日文/韩文) 文本）

"哈哈哈，congratulations"在容器中会显示成"哈哈哈，con[假设这里换了行]gratulations"

keep-all 只能在半角空格或连字符处换行

CJK 文本不断行， Non-CJK 文本表现同 normal

word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行

word-break一共有两个属性值

normal 只在允许的断字点换行（浏览器保持默认处理）

break-word 在长单词或 URL 地址内部进行换行

那么它与word-break的区别是什么呢？

首先看我们的前提条件：有个超长的文本节点："哈哈哈，congratulations"，我们假设有个容器长度只能装得下"哈哈哈，con"，那么意味着，不添加word-break与word-wrap属性的时候，该文本节点在容器内显示为"哈哈哈，[假设这里换了行]congratulations"，且单词congratulations肯定是冲出了容器边界的，超级难看。这个时候word-wrap就能派上用场了，给这段文字加上word-wrap: break-word之后，文本节点就会显示成"哈哈哈，[假设这里换了行]congratula[假设这里换了行]tions"，这样，为了防止长单词溢出，就在它的内部断句了

那既然有word-wrap，又为什么要有word-break属性呢？简单来说，当设置word-break:break-all; word-wrap:break-word，我们的超长文本"哈哈哈，congratulations"就会显示成"哈哈哈，con[假设这里换了行]gratulatio[假设这里换了行]ns"，它的用处就是：节省空间！是的，你没有看错！

word-wrap 是用来决定允不允许单词内断句的，如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话就进行单词内的断句

word-break:break-all则更粗暴，直接进行单词内的断句