Heim > Artikel > Web-Frontend > Wie kann ich bestimmte Zeilenumbruchstellen in HTML priorisieren, ohne oder geschützte Leerzeichen zu verwenden?

Wie kann ich bestimmte Zeilenumbruchstellen in HTML priorisieren, ohne oder geschützte Leerzeichen zu verwenden?

Susan SarandonOriginal: 2024-10-27 04:06:29365Durchsuche

How can I prioritize specific line break locations in HTML without using <wbr> oder geschützte Leerzeichen? oder geschützte Leerzeichen? " />

Festlegen bevorzugter Zeilenumbruchpositionen

In HTML treten Zeilenumbrüche normalerweise an Leerzeichen oder Kommas auf. In Situationen, in denen Sie einen Zeilenumbruch erzwingen möchten An einer bestimmten Stelle gibt es eine Technik, um bevorzugte Umbrüche zu priorisieren.

Um eine bevorzugte Position für Zeilenumbrüche festzulegen, ohne geschützte Leerzeichen zu verwenden, können Sie den folgenden Ansatz verwenden:

Definieren Sie eine CSS-Klasse:

<code class="css">span.avoidwrap {
  display: inline-block;
}</code>

Umschließen Sie den Text, der in dieser Klasse zusammengehalten werden soll:

<code class="html"><span class="avoidwrap">Text to keep together</span></code>

Dies Die Methode legt den umbrochenen Text als Inline-Block fest und verhindert so, dass er innerhalb seiner eigenen Grenzen umbricht. Der Zeilenumbruchalgorithmus versucht zunächst, an den angegebenen bevorzugten Stellen (z. B. Kommas) umzubrechen, bevor Leerzeichen innerhalb des Inline-Blocks berücksichtigt werden.

Zum Beispiel das folgende Code-Snippet:

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

Führt dazu, dass die Zeilenumbrüche an den angegebenen Kommastellen vorgenommen werden, wodurch der Text in jedem Inline-Block zusammengehalten wird.

Das obige ist der detaillierte Inhalt vonWie kann ich bestimmte Zeilenumbruchstellen in HTML priorisieren, ohne oder geschützte Leerzeichen zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html define for break using class this location

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie erstelle ich ein Platzhalter-Mixin in SCSS/CSS, das mit Doppelpunkten und Semikolons funktioniert?Nächster Artikel：Wie erstelle ich ein Platzhalter-Mixin in SCSS/CSS, das mit Doppelpunkten und Semikolons funktioniert?

In Verbindung stehende Artikel

Mehr sehen