Vermeiden Sie Zeilenumbrüche zwischen HTML-Elementen

109

Ich habe dieses <td>Element:

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

Ich hatte gehofft, dies in einer einzigen Zeile zu halten, aber das bekomme ich:

Geben Sie hier die Bildbeschreibung ein

Wie Sie sehen können, stehen Flagge und Telefonnummer in getrennten Zeilen. Sie  arbeiten zwischen den Nummern der Telefonnummer, aber nicht zwischen Flag und Telefonnummer.

Wie kann ich sicherstellen, dass der Renderer überhaupt keinen Zeilenumbruch einführt?

html whitespace

— blueFast
quelle

144

Es gibt verschiedene Möglichkeiten, Zeilenumbrüche im Inhalt zu verhindern. Die Verwendung  ist eine Möglichkeit und funktioniert gut zwischen Wörtern, aber die Verwendung zwischen einem leeren Element und einem Text hat keinen genau definierten Effekt. Gleiches gilt für den logischeren und zugänglicheren Ansatz, bei dem Sie ein Bild für ein Symbol verwenden.

Die robusteste Alternative ist die Verwendung von nobrMarkup, das nicht dem Standard entspricht, aber universell unterstützt wird und auch bei deaktiviertem CSS funktioniert:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(  In diesem Fall können, müssen Sie jedoch keine Leerzeichen verwenden.)

Ein anderer Weg ist das nowrapAttribut (veraltet / veraltet, funktioniert aber bis auf einige seltene Macken immer noch einwandfrei):

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

Dann gibt es den CSS-Weg, der in CSS-fähigen Browsern funktioniert und etwas mehr Code benötigt:

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

— Jukka K. Korpela
quelle

16

Betreff: nobr, mozilla warnt "Diese Funktion ist nicht standardisiert und befindet sich nicht auf einer Standardspur. Verwenden Sie sie nicht auf Produktionsstandorten mit Blick auf das Web: Sie funktioniert nicht für jeden Benutzer. Es kann auch zu großen Inkompatibilitäten zwischen Implementierungen und dem Verhalten kann sich in Zukunft ändern. " - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Luke

1

@ Luke, das ist eine "Standard" -Warnung. Sie beschreiben keine Inkompatibilität (auch keine kleine) und erwähnen keinen Browser, der dies nicht unterstützt nobr. da sind keine.

— Jukka K. Korpela

23

Das nobrTag gehört zur selben Kategorie wie blink: w3.org/TR/html5/obsolete.html#obsolete Entweder Sie arbeiten auf Webstandards hin oder Sie arbeiten auf ein chaotisches Web hin. Es ist deine Entscheidung.

— Luke

8

Wenn Sie Bootstrap verwenden, ist bereits eine Klasse "text-nowrap" definiert, die den Stype entsprechend festlegt.

— Ratatwisker

4

@ JukkaK.Korpela, HTML5 ist jetzt finalisiert und, sehr wenig überraschend, nobrimmer noch veraltet und "darf nicht verwendet werden" .

— Marcus

56

CSS für das td: white-space: nowrap;sollte es lösen.

— tcak
quelle

7

Wenn Sie dies für mehrere Wörter oder Elemente benötigen, es aber nicht auf einen ganzen TD oder ähnliches anwenden können, kann das Span-Tag verwendet werden.

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

Wenn Sie die Klassenversion verwenden, denken Sie daran, das CSS wie in der akzeptierten Antwort beschrieben einzurichten.

— Greg Little
quelle

2

Wenn das <i>Tag nicht als Block angezeigt wird und das Problem verursacht, sollte dies funktionieren:

<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

— ameagher
quelle

2

In einigen Fällen (z. B. durch JavaScript generiertes und eingefügtes HTML) möchten Sie möglicherweise auch versuchen, einen Joiner mit einer Breite von Null einzufügen:

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

Erweitern Sie das Snippet

— hugo der hungrige
quelle

2

Dies ist die wirkliche Lösung:

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>+34 666 66 66 66</span>
  </span>
</td>

CSS:

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

Beispiel Bilder, die immer vor Text stehen:

— Andrey Izman
quelle

-1

nobr ist zu unzuverlässig, benutze Tabellen

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

Es geht alles auf die gleiche Linie, alles ist auf gleicher Höhe und Sie haben viel mehr Freiheit, wenn Sie später etwas ändern möchten.

— Erik Österling
quelle