Unikaj łamania linii między elementami HTML


110

Mam ten <td>element:

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

Miałem nadzieję, że uda mi się to utrzymać w jednej linii, ale otrzymałem to:

wprowadź opis obrazu tutaj

Jak widać, flaga i numer telefonu znajdują się w osobnych wierszach. &nbsp;Pracują między numerami numer telefonu, ale nie między flagą i numerem telefonu.

Jak mogę się upewnić, że mechanizm renderujący nie wprowadzi żadnego podziału wiersza?

Odpowiedzi:


144

Istnieje kilka sposobów zapobiegania łamaniu linii w treści. Używanie &nbsp;jest jednokierunkowe i działa dobrze między słowami, ale używanie go między pustym elementem a tekstem nie daje dobrze zdefiniowanego efektu. To samo dotyczy bardziej logicznego i bardziej dostępnego podejścia, w którym używa się obrazu jako ikony.

Najbardziej niezawodną alternatywą jest użycie nobrniestandardowych, ale powszechnie obsługiwanych znaczników, które działają nawet wtedy, gdy CSS jest wyłączony:

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

(W tym przypadku możesz, ale nie musisz, używać &nbsp;zamiast spacji).

Innym sposobem jest nowrapatrybut (przestarzały / przestarzały, ale nadal działa dobrze, z wyjątkiem kilku rzadkich dziwactw):

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

Jest też sposób CSS, który działa w przeglądarkach obsługujących CSS i wymaga nieco więcej kodu:

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

16
Re: nobr, mozilla ostrzega "Ta funkcja jest niestandardowa i nie znajduje się na ścieżce standardów. Nie używaj jej na stronach produkcyjnych skierowanych do sieci WWW: nie będzie działać dla każdego użytkownika. Mogą również wystąpić duże niezgodności między implementacjami a zachowanie może się zmienić w przyszłości ”. - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr
Luke

1
@Luke, to „standardowe” ostrzeżenie. Nie opisują żadnej niekompatybilności (nawet małej) i nie wspominają o żadnej przeglądarce, która nie obsługuje nobr; nie ma żadnych.
Jukka K. Korpela

23
nobrTag jest w tej samej kategorii, co przy użyciu blink: w3.org/TR/html5/obsolete.html#obsolete Albo pracować w kierunku standardów sieciowych lub działać na rzecz chaotycznej sieci. Wybór nalezy do ciebie.
Łukasz

8
Jeśli używasz ładowania początkowego, klasa „text-nowrap” jest już zdefiniowana, co odpowiednio ustawia typ.
Ratatwisker

4
@ JukkaK.Korpela, HTML5 jest teraz sfinalizowany i, co nie nobrjest zaskakujące, nadal jest przestarzały i „nie może być używany” .
Marcus

58

CSS dla tego td: white-space: nowrap;powinno to rozwiązać.


7

Jeśli potrzebujesz tego dla kilku słów lub elementów, ale nie możesz zastosować tego do całego TD lub podobnego, możesz użyć znacznika Span.

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

Jeśli używasz wersji klasowej, pamiętaj, aby skonfigurować CSS zgodnie z zaakceptowaną odpowiedzią.


2

Jeśli <i>tag nie jest wyświetlany jako blok i powoduje problem, to powinno działać:

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


2

W niektórych przypadkach (np. Html generowany i wstawiany przez JavaScript) możesz również spróbować wstawić łącznik o zerowej szerokości:

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


2

To jest prawdziwe rozwiązanie:

<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 */
}

Przykład, obrazy, które zawsze przed tekstem:

wprowadź opis obrazu tutaj


-1

nobr jest zbyt zawodny, użyj tabel

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

Wszystko toczy się według tej samej linii, wszystko jest ze sobą wyrównane i masz znacznie większą swobodę, jeśli chcesz coś zmienić później.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.