¿Espacio que no se colapsa pero aún se puede dividir (línea) en HTML?

Question

¿Qué puedo usar en HTML si quiero tener espacios en blanco en el medio de la línea que parecen tres espacios, pero que aún pueden dividirse si la línea es demasiado larga?

Los espacios en blanco regulares se contraen (una serie de espacios se ve igual que un solo espacio) y en el espacio sin separación (&nbsp) la línea no se puede dividir.

Actualizar:Creo que lo que realmente quiero es una etiqueta ＜pre＞ que aún pueda dividir líneas largas (necesito mostrar el código fuente).

Answer 1

¿Qué pasa con uno o más espacios em (& amp; emsp;)? Por supuesto, esto dependerá del tamaño de fuente del usuario. Si eso realmente no funciona en su diseño, considere un espacio en (& Amp; ensp;).

También es posible que desee ver esta tabla de varios espacios en Wikipedia.

Answer 2

De hecho, tengo la respuesta exacta que estás buscando.Busqué esta respuesta en todas partes y nada de lo que nadie sugirió funcionó perfectamente.Entonces, se me ocurrió una solución, la probé y ¡me sorprendió que funcionara sin ningún defecto!

garrote En realidad tenía razón (simplemente no lo explicó ni lo explicó del todo).La solución es en lugar de poner   solo, poner &nbsp;<wbr>.Simplemente haga una búsqueda simple, reemplace y agregue el <wbr> etiquetar después de cada  .¡Funciona perfectamente!

El <wbr> tag es una etiqueta poco conocida compatible con todos los navegadores principales y que le indica al navegador que coloque una nueva línea aquí SÓLO si es necesario.

Actualizar:Encontré un navegador en el que esto no funciona exactamente bien: ¡IE 8!De hecho sacaron el <wbr> ¡etiqueta!Resolví este problema creando una clase que dice:

.wbr:before { content: "\200B" }

y en lugar de reemplazar   con &nbsp;<wbr>, reemplácelo con lo siguiente:

&nbsp;<wbr><span class='wbr'></span>

En PHP, esto se vería así:

$text = str_replace(" ","&nbsp;<wbr><span class='wbr'></span>", $text);

No olvides agregar la clase también.

Obviamente esto se está volviendo un poco excesivo, reemplazando un solo espacio con todo eso, pero funciona tal como lo deseaba y como nunca vi el marcado funcionó para mí.

Si esto es demasiado complicado, otra solución es intercambiar espacios dobles por un   seguido de un espacio normal.Esto se alternará   y espacios y trabajos normales en mis pruebas.

En PHP, esto se vería así:

$text = str_replace("  ","  ", $text);

¡Espero que esto ayude!Investigué lo suficiente sobre esto;Pensé que debería transmitirlo.

Answer 3

¿No funcionará un espacio entre dos espacios que no se rompen?

& amp; nbsp;  

Answer 4

¿Qué tal < wbr > ?

Answer 5

Si no apunta a IE (excepto 8, modo estándar):

<span style="white-space: pre-wrap">   </span>

Para IE, <span style="width:3ex"></span> funciona en modo peculiar, así que combínalos y ...

<span style="width:3ex;white-space:pre-wrap">   </span>

que parece funcionar en todos los lugares que probé ... excepto los estándares IE7. D'oh!

Answer 6

¿Qué tal dos   's seguidos de un espacio regular? La única desventaja de eso (hasta donde yo sé) es que si un salto de línea cae naturalmente en el espacio regular, tendrás un poco de espacio final en la línea anterior debido a los espacios que no se rompen, pero no No creo que eso haga alguna diferencia en la apariencia real de la página.

Answer 7

Podría ser mejor dar un paso atrás y preguntar qué es lo que está tratando de representar. ¿Qué significa este espacio extra ancho?

Answer 8

da 100px al espacio izquierdo entre su texto  ejemplo de espacios

span style = " margin-left: 100px; "

(n_n)