Evita le interruzioni di riga tra gli elementi html

110

Ho questo <td>elemento:

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

Speravo di mantenerlo in una singola riga, ma questo è quello che ottengo:

inserisci qui la descrizione dell'immagine

Come puoi vedere, la bandiera e il numero di telefono sono in righe separate. Il  lavorano tra le cifre del numero di telefono, ma non tra bandiera e numero di telefono.

Come posso assicurarmi che non venga introdotta alcuna interruzione di riga dal renderizzatore?

html whitespace

— blueFast
fonte

144

Esistono diversi modi per evitare interruzioni di riga nel contenuto. L'uso  è unidirezionale e funziona bene tra le parole, ma usarlo tra un elemento vuoto e del testo non ha un effetto ben definito. Lo stesso si applicherebbe all'approccio più logico e più accessibile in cui si utilizza un'immagine per un'icona.

L'alternativa più robusta è usare il nobrmarkup, che non è standard ma supportato universalmente e funziona anche quando CSS è disabilitato:

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

(In  questo caso puoi, ma non è necessario, utilizzare al posto degli spazi.)

Un altro modo è l' nowrapattributo (deprecato / obsoleto, ma funziona ancora bene, ad eccezione di alcune rare stranezze):

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

Poi c'è il metodo CSS, che funziona nei browser abilitati CSS e richiede un po 'più di codice:

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

— Jukka K. Korpela
fonte

16

Re: nobr, mozilla avverte "Questa funzione non è standard e non è su una traccia standard. Non utilizzarla su siti di produzione che si affacciano sul Web: non funzionerà per tutti gli utenti. Potrebbero anche esserci grandi incompatibilità tra le implementazioni e il il comportamento potrebbe cambiare in futuro ". - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Luca

1

@Luke, questo è un avvertimento "standard". Non descrivono alcuna incompatibilità (anche minima) e non menzionano alcun browser che non supporta nobr; non ce ne sono.

— Jukka K. Korpela

23

Il nobrtag appartiene alla stessa categoria dell'uso blink: w3.org/TR/html5/obsolete.html#obsolete O lavori per standard web o lavori per un web caotico. La scelta è tua.

— Luca

8

Se stai usando bootstrap, è già definita una classe "text-nowrap" che imposta lo stype di conseguenza.

— Ratatwisker

4

@ JukkaK.Korpela, HTML5 è ora finalizzato e, non sorprende, nobrè ancora deprecato e "non deve essere utilizzato" .

— Marcus

58

CSS per quel td: white-space: nowrap;dovrebbe risolverlo.

— tcak
fonte

7

Se è necessario per più parole o elementi, ma non è possibile applicarlo a un intero TD o simile, è possibile utilizzare il tag Span.

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

Se utilizzi la versione della classe, ricordati di impostare il CSS come descritto in dettaglio nella risposta accettata.

— Greg Little
fonte

2

Se il <i>tag non viene visualizzato come un blocco e causa il problema, dovrebbe funzionare:

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

— ameagher
fonte

2

In alcuni casi (ad esempio html generato e inserito da JavaScript) potresti anche provare a inserire un joiner di larghezza zero:

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

Espandi lo snippet

— hugo der hungrige
fonte

2

Questa è la vera soluzione:

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

Esempio, immagini che sempre prima del testo:

— Andrey Izman
fonte

-1

nobr è troppo inaffidabile, usa le tabelle

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

Tutto va sulla stessa linea, tutto è alla pari e hai molta più libertà se vuoi cambiare qualcosa in seguito.

— Erik Österling
fonte