nbsp - html(+ css): denota un lugar preferido para un salto de línea
salto de linea html/n (8)
Digamos que tengo este texto que quiero mostrar en una celda de tabla HTML:
Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks
y quiero que la línea se rompa preferencialmente después de una de las comas.
¿Hay alguna manera de decirle al renderizador de HTML que intente dividir en algún punto designado, y hacerlo primero antes de intentar romper después de uno de los espacios, sin usar espacios sin interrupción? Si utilizo espacios sin separación, el ancho aumenta de manera incondicional. Quiero que ocurra el salto de línea después de uno de los espacios, si el algoritmo de ajuste de línea lo ha intentado con las comas primero y no puede hacer que la línea encaje.
Intenté envolver fragmentos de texto en elementos <span> pero eso no parece ser útil.
<html>
<head>
<style type="text/css">
div.box { width: 180px; }
table, table td {
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
<td>lorem ipsum</td>
</tr>
<tr>
<td>lorem ipsum</td>
<td>
<span>Honey Nut Cheerios,</span>
<span>Wheat Chex,</span>
<span>Grape-Nuts,</span>
<span>Rice Krispies,</span>
<span>Some random cereal with a very long name,</span>
<span>Honey Bunches of Oats,</span>
<span>Wheaties,</span>
<span>Special K,</span>
<span>Froot Loops,</span>
<span>Apple Jacks</span>
</td>
<td>lorem ipsum</td>
</tr>
</table>
</div>
</body>
</html>
Nota: parece que el text-wrap: avoid CSS3 text-wrap: avoid comportamiento es lo que quiero, pero parece que no puedo hacer que funcione.
Con su marcado arriba use span { white-space:nowrap } . Es tan bueno como puedes esperar realmente.
Hay un elemento HTML para eso ™: el elemento (ahora estandarizado) <wbr> .
Te aconsejo que uses eso. Puede que no funcione en everywhere , pero es lo mejor que puede hacer sin pasar por aros.
Hay una muy buena solución RWD de Dan Mall que prefiero. Voy a agregarlo aquí porque algunas otras preguntas con respecto a los saltos de línea receptivos están marcadas como duplicados de este.
En tu caso, tendrías:
<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>
Y una línea de CSS en tu consulta de medios:
@media screen and (min-width: 768px) {
.rwd-break { display: none; }
}
La respuesta es no ( No se puede alterar el algoritmo de salto de línea usado ).
Pero hay algunas soluciones (la mejor es la respuesta aceptada )
Puede acercarse con el espacio sin interrupción pero solo entre palabras que van juntas ( lo que tiene en tramos, pero no después de la coma ), o puede usar el white-space:nowrap como @Marcel mencionado.
Ambas soluciones hacen lo mismo, y ambas no romperán un grupo de palabras si no encajan por sí mismas.
Mediante el uso
span.avoidwrap { display:inline-block; }
y envolviendo el texto que quiero que se mantenga junto en
<span class="avoidwrap"> Text </span>
se ajustará primero en bloques preferidos y luego en fragmentos más pequeños según sea necesario.
Nueva respuesta ahora tenemos HTML5:
HTML5 presenta la etiqueta <wbr> . (Representa Word Break Opportunity).
Agregar un <wbr> le dice al navegador que se divierta antes en cualquier otro lugar, por lo que es fácil hacer que las palabras se rompan después de las comas:
Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks
Es compatible con todos los principales navegadores, aparte de IE.
Una respuesta fácil es usar el carácter de espacio de ancho cero ​ Se utiliza para hacer espacios de interrupción dentro de palabras en puntos específicos .
¿Es exactamente lo contrario del espacio sin interrupción (bueno, en realidad, la palabra-carpintero ⁠ ) ( palabra-carpintero es la versión de ancho cero del espacio sin interrupción )
(También hay otros códigos que no se rompen, como el guión de no interrupción ‑ ) (aquí hay una respuesta extensa sobre diferentes ''variantes'' de nbsp )
Si quiere una solución HTML-only (sin CSS / JS), puede usar una combinación del espacio de ancho cero y el espacio sin interrupciones , sin embargo, esto sería realmente complicado , y escribir una versión legible por humanos requiere un pequeño esfuerzo .
ctrl + c , ctrl + v ayuda
ejemplo:
Honey Nut Cheerios,<!---->​<!--
-->Wheat Chex,<!---->​<!--
-->Grape‑Nuts,<!---->​<!--
-->Rice Krispies,<!---->​<!--
-->Some random cereal with a very long name,<!---->​<!--
-->Honey Bunches of Oats,<!---->​<!--
-->Wheaties,<!---->​<!--
-->Special K,<!---->​<!--
-->Froot Loops,<!---->​<!--
-->Apple Jacks
¿ilegible? este es el mismo HTML sin etiquetas de comentarios:
Honey Nut Cheerios,​Wheat Chex,​Grape‑Nuts,​Rice Krispies,​Some random cereal with a very long name,​Honey Bunches of Oats,​Wheaties,​Special K,​Froot Loops,​Apple Jacks
Sin embargo, dado que el procesamiento HTML html no está completamente estandarizado, es bueno para ese tipo de uso ya que esta solución no usa CSS / JS
Además, si usa esto en combinación con cualquiera de las soluciones basadas en <span> , tendrá el control completo del algoritmo de salto de línea
(nota editorial :)
El único problema que podría verte tener es si quisieras cambiar dinámicamente los puntos de ruptura preferidos. Esto requeriría la manipulación JS constante de cada tamaño proporcional de los tramos y tener que manejar esas entidades HTML en el texto.
Use <div> lugar de <span> , o especifique una clase para SPAN y asígnele el atributo display: block .