<wbr> または非改行スペースを使用せずに、HTML 内の特定の改行位置に優先順位を付けるにはどうすればよいですか?-CSSチュートリアル-php.cn

または非改行スペースを使用せずに、HTML 内の特定の改行位置に優先順位を付けるにはどうすればよいですか?

Susan Sarandon

リリース： 2024-10-27 04:06:29

オリジナル

452 人が閲覧しました

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 中国語 Web サイトの他の関連記事を参照してください。