如何在不使用或不间断空格的情况下对 HTML 中的特定换行位置进行优先级排序？-css教程-PHP中文网

首页

web前端

css教程

如何在不使用或不间断空格的情况下对 HTML 中的特定换行位置进行优先级排序？

Susan Sarandon

Oct 27, 2024 am 04:06 AM

How can I prioritize specific line break locations in HTML without using <wbr> 或不间断空格？或不间断空格？ " />

指定首选换行位置

在 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>

登录后复制

将导致在指定的逗号位置进行换行，将每个内联块中的文本保持在一起。

以上是如何在不使用或不间断空格的情况下对 HTML 中的特定换行位置进行优先级排序？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn