6

Si usas una secuencia de letras no se rompe aunque el espacio horizontal disponible en el contenedor se acabe, a no ser que uses propiedades CSS al efecto como: word-break y word-wrap, pero si la secuencia tiene caracteres como guiones rompe en estos, distribuyendo la secuencia en varias filas.

Por ejemplo:

<div style="background:lightgrey;margin:50px;width:90px">
    <p>LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>

El primer párrafo no se rompe, pero en el caso del segundo, la línea se rompe después del primer guión. Si yo quisiera que se mostrará:

Loremipsumdolor---> 
Lorem ipsum.

o así:

Loremipsumdolor 
--->Lorem ipsum.

¿Hay alguna propiedad CSS o tag HTML para lograrlo? es decir, ¿algún tag que englobando un grupo de caracteres evite que se separen en varias líneas o que situado en un punto, rompa la línea en ese mismo punto en caso necesario?

Editada:

La mejor solución, por el momento, es usar la propiedad CSS white-space: nowrap que se menciona en la respuesta de kleith. Aunque le encontré un pero (fallo en el primer párrafo):

<div style="background:lightgrey;margin:50px;padding:20px;width:90px">
    <p><span style="white-space:nowrap">Loremipsumdolor---></span>Lorem ipsum.</p>
    <p><span style="white-space:nowrap">Loremipsumdolor---></span><i></i>Lorem ipsum.</p>
    <p><span style="white-space:nowrap">Loremipsumdolor---></span> Lorem ipsum.</p>
</div>

Aunque cierro el <span> donde se aplica el estilo si el texto consecutivo está inmediatamente pegado al grupo se ve afectado por este y no rompe, por eso aparece:

Loremipsumdolor--->Lorem 
ipsum.

Una solución, si debe estar pegado, es añadir un elemento inline vacío entre este cierre de grupo y el texto consecutivo, por ejemplo <i> (segundo párrafo). Resultado:

Loremipsumdolor--->
Lorem ipsum.

Ya si hubiera espacios en blanco entre el cierre del grupo y el resto de caracteres se rompe sin problema y se conserva el grupo en su línea. Visualmente el resultado es igual al anterior.

5 respuestas 5

0

En HTML tienes la etiqueta <wbr /> que permite indicar posiciones donde es preferible que el navegador rompa una palabra/frase para pasar a una nueva línea.

En tu caso quieres romper la línea antes o después de la flecha pero no entre medias. Puedes conseguirlo poniendo etiquetas <wbr> antes (y opcionalmente después) del ---> y combinándolo con el white-space: nowrap que comentas en la pregunta (he añadido un par de ejemplos con diferentes anchos comparando cómo se vería con y sin el <wbr>):

<div style="background:lightgrey;margin:50px;width:90px;white-space:nowrap;">
    <p>CON WBR-LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor<wbr/>---><wbr> Lorem ipsum.</p>
</div>

<div style="background:lightgrey;margin:50px;width:90px;white-space:nowrap;">
    <p>SIN WBR-LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>

<hr />

<div style="background:lightgrey;margin:50px;width:130px;white-space:nowrap;">
    <p>CON WBR-LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor<wbr/>---><wbr> Lorem ipsum.</p>
</div>

<div style="background:lightgrey;margin:50px;width:130px;white-space:nowrap;">
    <p>SIN WBR-LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>

<hr />

<div style="background:lightgrey;margin:50px;width:160px;white-space:nowrap;">
    <p>CON WBR-LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor<wbr/>---><wbr> Lorem ipsum.</p>
</div>

<div style="background:lightgrey;margin:50px;width:160px;white-space:nowrap;">
    <p>SIN WBR-LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>

1
  • El primer ejemplo se ve solo regular poniendo wbr antes y después. Se ve mejor sólo con el wbr antes.
    – Alvaro Montoro
    el 1 ene. 2023 a las 19:07
0

Puedes usar el tag <br>, para romper la frase y que sea nueva linea.

<div style="background:lightgrey;display: inline-block;">
  <p>LoremipsumdolorLoremipsum.</p>
  <p>Loremipsumdolor<br>---> Lorem ipsum.</p>
</div>

1
  • Conozco <br>. No quiero romperla yo, quiero que se pueda romper sólo en ciertos lugares según el tamaño del contenedor, que lo habitual es que varie con las resoluciones. Lo que quiero es evitar que se rompa donde no deba, es decir poder proteger grupos de caracteres de la ruptura.
    – Orici
    el 1 ene. 2018 a las 2:45
0

Si con la propiedad de white-space: nowrap; evita todo wrap.

<div style="background: lightgrey; margin: 50px; width: 90px; white-space: nowrap;">
    <p>LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>
1
  • Con la propiedad "white-space: nowrap" puedo hacer los ajustes que requiero, aunque tu respuesta no se ajusta exactamente a lo que pregunto, las líneas no se romperán en ningún punto si la pones en el contenedor de los párrafos. Saludos.
    – Orici
    el 1 ene. 2018 a las 2:34
0

Word-wrap: break-Word; esto evitara que el texto se salga de la caja :)

<div style="background:lightgrey;margin:50px;width:90px;Word-wrap: break-Word">
    <p>LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>

-2

modo movil modo escritorio

codigo :

 	div {
 background:lightgrey;
  width:60%;
  margin:10%;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>titulo</title>
</head>
<body>
<div>
    <p>LoremipsumdolorLoremipsum.</p>
    <p>Loremipsumdolor---> Lorem ipsum.</p>
</div>
</body>
</html>

1
  • Hola @Gilberto, muchas gracias por participar, solo una sugerencia: trata o al menos describe un poco lo que quisiste decir, porque según la pregunta que es muy concreta y detallada, tu respuesta es muy vaga y casi ni aplica. Buen día. el 2 ene. 2018 a las 5:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.