马黑黑 发表于 2023-1-7 11:56

pre 也可以折行

本帖最后由 马黑黑 于 2023-1-7 12:00 编辑 <br /><br /><style>
.papa {
        margin: auto;
        width: 98%;
}
.papa > p { padding: 8px 0; }
.mypre {
        width: 400px;
        border: 1px solid #ccc;
        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
        white-space: pre-wrap;
}
</style>

<div class="papa">
<p>pre&nbsp;元素用于预格式化文本，它会保留文本的空格和制表符。通常，不做设置的话，pre&nbsp;内的文本不会自动折行，超出预设宽度之后自动溢出。试看下面的例子：</p>

<pre style="width: 400px; border: 1px solid #ccc;">    第一行（前面是四个空格）
        第二行（前面是Tab制表符） ABCDEFGHIJKLMNOPQRSTUVWXWZ123456789
</pre>

<p>我们设置一下&nbsp;pre&nbsp;标签：</p>
<p>&nbsp; &nbsp; <span style="background-color: sandybrown;">&nbsp;white-space: pre-wrap;&nbsp;</span></p>

<p>OK，看看效果如果：</p>

<pre class="mypre">    第一行（前面是四个空格）
        第二行（前面是Tab制表符） ABCDEFGHIJKLMNOPQRSTUVWXWZ123456789
</pre>

<p>效果表明，文本已经自动折行了。折行的方式是默认的 break-word，由于后面的字符串是没有空格的一系列字母和数字，它们整体被视为一个单词。不论如何，pre里的自动折行事实存在，说明自动折行可以设置到 pre 元素之内，核心设置是 white-space: pre-wrap 。</p>
<p><font color="#f4a460">white-space</font> 属性用来设置段落中的文本是否折行，默认值是 <font color="SandyBrown">normal</font> ，按正常标准自动折行，其值还有&nbsp;<font color="#f4a460">nowrap</font>（不折行）、<font color="#f4a460">pre</font>（按html的pre标签标准不折行）、<font color="#f4a460">pre-wrap</font>（保留空白符序列，但是正常地进行换行）和<font color="#f4a460"> pre-line </font>（合并空白符序列，但是保留换行符），还有一个继承值&nbsp;<font color="#f4a460">inherit</font>&nbsp;，就是继承父元素的设置值。</p>
<p>html和css学问多多，一点一滴的积累不是问题，不过学习过程中要有探索精神，否则 pre 标签不能折行将成为一个错误的认知。</p>

</div>

樵歌 发表于 2023-1-7 13:39

虽然看不懂，知道是好东东就行了{:4_173:}

马黑黑 发表于 2023-1-7 13:50

樵歌 发表于 2023-1-7 13:39
虽然看不懂，知道是好东东就行了

没问题{:5_106:}

红影 发表于 2023-1-7 15:00

这个能潘丹是否折行，还能判断是否是整个单词，真智能{:4_187:}

马黑黑 发表于 2023-1-7 18:03

红影 发表于 2023-1-7 15:00
这个能潘丹是否折行，还能判断是否是整个单词，真智能

可以设置的。break-all 以边界为标准折行，不管单词逻辑。

樵歌 发表于 2023-1-7 20:33

马黑黑 发表于 2023-1-7 13:50
没问题

这个基本判断管几十年{:4_173:}

马黑黑 发表于 2023-1-7 21:03

樵歌 发表于 2023-1-7 20:33
这个基本判断管几十年

那也不差

红影 发表于 2023-1-7 21:36

马黑黑 发表于 2023-1-7 18:03
可以设置的。break-all 以边界为标准折行，不管单词逻辑。

还分得挺细的呢。

马黑黑 发表于 2023-1-7 21:50

红影 发表于 2023-1-7 21:36
还分得挺细的呢。

差不多应有尽有

红影 发表于 2023-1-7 22:09

马黑黑 发表于 2023-1-7 21:50
差不多应有尽有

设置功能的人考虑得很细致。

樵歌 发表于 2023-1-8 07:55

马黑黑 发表于 2023-1-7 21:03
那也不差

精确误差0.oooooooo1

马黑黑 发表于 2023-1-8 21:44

樵歌 发表于 2023-1-8 07:55
精确误差0.oooooooo1

可以忽略不计

马黑黑 发表于 2023-1-8 21:47

红影 发表于 2023-1-7 22:09
设置功能的人考虑得很细致。

好像应该这么做

红影 发表于 2023-1-8 22:41

马黑黑 发表于 2023-1-8 21:47
好像应该这么做

真不容易{:4_204:}

马黑黑 发表于 2023-1-9 11:44

红影 发表于 2023-1-8 22:41
真不容易

世界上容易的事情不多

红影 发表于 2023-1-9 13:54

马黑黑 发表于 2023-1-9 11:44
世界上容易的事情不多

也很多啊，睡觉容易，游玩容易{:4_173:}

马黑黑 发表于 2023-1-9 17:17

红影 发表于 2023-1-9 13:54
也很多啊，睡觉容易，游玩容易

睡觉也不见得容易的，你问问小辣椒。
游玩得有钱，没钱出不去

红影 发表于 2023-1-9 19:55

马黑黑 发表于 2023-1-9 17:17
睡觉也不见得容易的，你问问小辣椒。
游玩得有钱，没钱出不去

找你说来，都不容易呗。

马黑黑 发表于 2023-1-9 20:02

红影 发表于 2023-1-9 19:55
找你说来，都不容易呗。

我容易的别人未必容易，别人容易的我未必容易

红影 发表于 2023-1-9 21:16

马黑黑 发表于 2023-1-9 20:02
我容易的别人未必容易，别人容易的我未必容易

这话中肯，赞同。
页: [1] 2
查看完整版本: pre 也可以折行