una - Especificar un punto de corte de línea preferido en texto HTML en un diseño responsivo
salto de linea css (5)
¿Es la etiqueta <wbr> (word break) lo que está buscando?
No es CSS o JS, pero se puede colocar directamente en el HTML
Esta pregunta ya tiene una respuesta aquí:
Me preguntaba si hay una magia CSS o javascript que podría colocar un marcador en un texto html para que el navegador sepa dónde se prefiere la creación de saltos de línea cuando el texto se vuelve pequeño. ¿Hay tal cosa?
Creo que esto funciona muy bien:
span.line {
display: inline-block;
}
<p>
<span class="line">This text should break</span>
<span class="line">after the word "break"</span>
</p>
El texto aún se rompe en otros lugares cuando no hay suficiente espacio:
Definitivamente entiendo por qué quieres esto, y ciertamente ha habido ocasiones en las que he mirado un diseño y al principio pensé: quería lo mismo.
Pero no estaría haciendo la debida justicia si no mencionara que hacer esto puede causar algunos problemas importantes de flujo de palabras.
¿Tienes un sitio web sensible? Si es así, el simple hecho de cambiar el tamaño de la ventana gráfica en su navegador puede convertir una línea de texto quebrado de aspecto agradable en algo que se ve terrible.
E incluso si no tiene un sitio web receptivo y utiliza un diseño de píxel perfecto, todo lo que necesita hacer es cambiar el tamaño de la fuente y todo se volverá loco.
Yo repensaría esta decisión. Sin embargo, sólo mi opinión.
Desafortunadamente, no hay forma en HTML o CSS de expresar que un punto de interrupción de línea permitido sea más preferible que otro. Si lo hubiera, podríamos esperar encontrarlo en el módulo de texto CSS3 , pero su borrador actual no tiene nada de eso, solo formas de controlar cómo se determinan los puntos de salto de línea permitidos.
Lo que puede hacer es rechazar los saltos de línea donde normalmente se permitirían. Por lo general, un espacio implica una oportunidad de salto de línea, pero usar un espacio de no interrupción (que se puede escribir como si se desea) lo prohíbe.
Por ejemplo, si tiene un texto de encabezado como "Un puente sobre el Mar de Irlanda y otros cuatro planes asombrosos", entonces podría decir que existe la mejor oportunidad de romper líneas después de "y", una buena oportunidad después de "cruzar", y bastante malo (aunque permisible) después de "Irish", y así sucesivamente. Pero no puede hacerlo en HTML o CSS, y por lo general tampoco en los programas de composición tipográfica. Solo puede permitir o rechazar los descansos, por ejemplo, como en <h1>A bridge across the Irish Sea and four other amazing plans</h1> . Para encabezados y titulares, esto podría tener sentido, aunque signifique que considere cada espacio y decida si lo hace sin interrupciones.
Puede poner texto en intervalos y evitar saltos de línea dentro de ellos. De esta manera, los saltos de línea solo podrían ocurrir entre dos tramos:
<span style="white-space:nowrap">I won''t break.</span>
<!-- this is a breaking point -->
<span style="white-space:nowrap">I won''t break either.</span>