ホームページ >ウェブフロントエンド >CSSチュートリアル > または非改行スペースを使用せずに、HTML 内の特定の改行位置に優先順位を付けるにはどうすればよいですか?

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

Susan Sarandon
Susan Sarandonオリジナル
2024-10-27 04:06:29440ブラウズ

How can I prioritize specific line break locations in HTML without using <wbr> または非改行スペース? 
または非改行スペース? " />

優先改行位置の指定

HTML では、通常、改行はスペースまたはカンマで行われます。ただし、強制的に改行したい場合は、特定の位置では、優先改行に優先順位を付ける手法があります。

非改行スペースを使用せずに優先改行位置を指定するには、次のアプローチを利用できます:

  1. CSS クラスを定義します:

    <code class="css">span.avoidwrap {
      display: inline-block;
    }</code>
  2. このクラスにまとめるテキストをラップします:

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。