如何在不使用 或不间断空格的情况下对 HTML 中的特定换行位置进行优先级排序？
- Susan Sarandon原创
- 2024-10-27 04:06:29440浏览
或不间断空格？
" />
指定首选换行位置
在 HTML 中，换行通常出现在空格或逗号处。但是，在您想要强制换行的情况下在特定位置，有一种技术可以优先考虑首选换行符。
要指定首选换行符位置而不使用不间断空格，您可以使用以下方法：
-
定义一个CSS类：
<code class="css">span.avoidwrap { display: inline-block; }</code> -
将要保存在该类中的文本包裹在一起：
<code class="html"><span class="avoidwrap">Text to keep together</span></code>
这个方法将换行文本设置为内联块，防止其在自己的边界内中断。换行算法将首先尝试在指定的首选位置（例如逗号）处换行，然后再考虑内联块内的空格。
例如，以下代码片段：
<code class="html"><html>
<head>
<style type="text/css">
span.avoidwrap {
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies</span>
<br />
<span class="avoidwrap">Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K</span>
<br />
<span class="avoidwrap">Froot Loops, Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html></code>
将导致在指定的逗号位置进行换行，将每个内联块中的文本保持在一起。
以上是如何在不使用
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn