Evite el salto de línea entre elementos html

109

Tengo este <td>elemento:

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

Esperaba mantener esto en una sola línea, pero esto es lo que obtengo:

ingrese la descripción de la imagen aquí

Como puede ver, la bandera y el número de teléfono están en líneas separadas. El  trabajan en entre los números del número de teléfono, pero no entre la bandera y número de teléfono.

¿Cómo puedo asegurarme de que el renderizador no introduzca ningún salto de línea?

html whitespace

— blueFast
fuente

144

Hay varias formas de evitar saltos de línea en el contenido. El uso  es unidireccional y funciona bien entre palabras, pero usarlo entre un elemento vacío y algún texto no tiene un efecto bien definido. Lo mismo se aplicaría al enfoque más lógico y más accesible en el que utiliza una imagen como icono.

La alternativa más sólida es usar el nobrmarcado, que no es estándar pero es compatible universalmente y funciona incluso cuando CSS está deshabilitado:

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

(Puede, pero no es necesario, usar en  lugar de espacios en este caso).

Otra forma es el nowrapatributo (en desuso / obsoleto, pero aún funciona bien, excepto por algunas peculiaridades raras):

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

Luego está la forma CSS, que funciona en navegadores habilitados para CSS y necesita un poco más de código:

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

— Jukka K. Korpela
fuente

16

Re: nobr, mozilla advierte: "Esta función no es estándar y no está en una pista de estándares. No la use en sitios de producción frente a la Web: no funcionará para todos los usuarios. También puede haber grandes incompatibilidades entre las implementaciones y el comportamiento puede cambiar en el futuro ". - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— Lucas

1

@ Luke, esa es una advertencia "estándar". No describen ninguna incompatibilidad (ni siquiera una pequeña) y no mencionan ningún navegador que no lo admita nobr; no hay ninguno.

— Jukka K. Korpela

23

La nobretiqueta está en la misma categoría que usa blink: w3.org/TR/html5/obsolete.html#obsolete O trabajas hacia los estándares web o trabajas hacia una web caótica. La decisión es tuya.

— Lucas

8

Si está utilizando bootstrap, ya está definida una clase "text-nowrap" que establece el tipo en consecuencia.

— Ratatwisker

4

@ JukkaK.Korpela, HTML5 ahora está finalizado y, como era de esperar, nobrtodavía está en desuso y "no debe usarse" .

— Marcus

57

CSS para ese td: white-space: nowrap;debería resolverlo.

— tcak
fuente

7

Si necesita esto para varias palabras o elementos, pero no puede aplicarlo a un TD completo o similar, se puede usar la etiqueta Span.

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

Si usa la versión de la clase, recuerde configurar el CSS como se detalla en la respuesta aceptada.

— Greg Little
fuente

2

Si la <i>etiqueta no se muestra como un bloque y causa el problema, esto debería funcionar:

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

— un amor
fuente

2

En algunos casos (por ejemplo, html generado e insertado por JavaScript), es posible que también desee intentar insertar un ensamblador de ancho cero:

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

Expandir fragmento

— hugo der hungrige
fuente

2

Esta es la verdadera solución:

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

Ejemplo, imágenes que siempre antes del texto:

— Andrey Izman
fuente

-1

nobr es demasiado poco confiable, use tablas

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

Todo va en la misma línea, todo está nivelado entre sí, y tienes mucha más libertad si quieres cambiar algo más tarde.

— Erik Österling
fuente