Digamos que tengo este texto que quiero mostrar en una celda de una 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 Jacksy quiero que la línea se rompa preferentemente después de una de las comas.
¿Hay alguna manera de decirle al renderizador HTML que intente romper en algún lugar designado, y hacerlo primero antes de intentar romper después de uno de los espacios, sin usar espacios que no se rompan? Si utilizo espacios que no se rompen, el ancho aumenta incondicionalmente. Yo quiero el salto de línea que suceda después de uno de los espacios, si el algoritmo de ajuste de líneas ha intentado con las comas primero y no puede obtener la línea de ajuste.
Intenté envolver fragmentos de texto en <span>elementos, pero eso no parece hacer nada ú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 comportamiento de CSS3text-wrap: avoid es lo que quiero, pero parece que no puedo hacer que funcione.
Respuestas:
Mediante el uso
y envolver el texto en el que quiero mantener juntos
se envolverá primero en bloques preferidos y luego en fragmentos más pequeños según sea necesario.
fuente
<span>Hello </span><span> world</span>seráHelloworldy<span>Hello</span> <span>world</span>será normalHello world.<wbr>no indica un lugar preferido para romper la línea, pero sí uno posible .<span>s anidados , por lo que puede (en efecto) especificar una jerarquía de puntos de interrupción preferidos.Hay una solución RWD muy elegante de Dan Mall que prefiero. Lo voy a agregar aquí porque algunas otras preguntas con respecto a los saltos de línea receptivos están marcadas como duplicados de esta.
En tu caso, tendrías:
Y una línea de CSS en su consulta de medios:
fuente
Una respuesta fácil es usar el carácter de espacio de ancho cero.
​Se usa para hacer espacios de ruptura dentro de palabras en puntos específicos .¿Hace exactamente lo contrario del espacio que no se separa
(bueno, en realidad el ensamblador de palabras⁠) ( el ensamblador de palabras es la versión de ancho cero del espacio que no se separa )(también hay otros códigos que no se rompen, como el guión que no se rompe
‑) (aquí hay una respuesta extensa sobre diferentes 'variantes' de nbsp )Si desea una solución solo HTML (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 poco de esfuerzo .
ctrl+ c, ctrl+ vayuda
ejemplo:
¿ilegible? este es el mismo HTML sin etiquetas de comentarios:
Sin embargo, dado que la representación HTML del correo electrónico no está completamente estandarizada, es buena para ese tipo de uso, ya que esta solución no utiliza CSS / JS.
Además, si usa esto en combinación con cualquiera de las
<span>soluciones basadas en, tendrá un control completo del algoritmo de salto de línea(nota editorial :)
El único problema que pude ver que tiene es si desea cambiar los puntos de rotura preferidos de forma dinámica. Esto requeriría la manipulación constante de JS de cada uno de los tramos de tamaño proporcional y tener que manejar esas entidades HTML en el texto.
fuente
La respuesta es no ( no puede alterar el algoritmo de salto de línea utilizado ).
Pero hay algunas soluciones (la mejor es la respuesta aceptada )
Puede acercarse con el espacio
sin ruptura, pero solo entre las palabras que van juntas ( lo que tiene en intervalos, pero no después de la coma ), o puede usarwhite-space:nowrapcomo mencionó @Marcel.Ambas soluciones hacen lo mismo, y ambas no romperán un grupo de palabras si no encaja por sí solo.
fuente
Con su marcado anterior, use
span { white-space:nowrap }. Es tan bueno como puedes esperar realmente.fuente
spanelemento y evita que los espacios se rompan en absoluto. Solo quiero disuadir al renderizador de que se interrumpa entre uno de mis elementos, pero si es necesario, quiero que lo haga. <wbr>diferencia de un espacio? Por lo que puedo decir, las opciones son que un personaje dado permita un descanso o no. Entonces, '-' y '' y​y<wbr>y­todos permiten una pausa (imprimiendo un guión, un espacio, nada, nada y un guión solo en la pausa, respectivamente), mientras que no.Nueva respuesta ahora tenemos HTML5:
HTML5 introduce la
<wbr>etiqueta. (Significa Word Break Opportunity).Agregar
<wbr>le dice al navegador que se rompa allí antes que en cualquier otro lugar, por lo que es fácil hacer que las palabras se rompan después de las comas:Es compatible con todos los principales navegadores, aparte de IE.
fuente
<wbr>tiene otro propósito. Sin mencionar que esta respuesta es un duplicado de una respuesta que existía mucho antes.<wbr>simplemente establece una oportunidad de descanso; no "le dice al navegador que se rompa allí antes que en ningún otro lugar". Usado antes de un espacio, normalmente es inútil, ya que los espacios normalmente son oportunidades de salto de línea.<wbr>no no dar prioridad a un salto de línea sobre el espacio en blanco ordinario. Por lo tanto, la envoltura simplemente ocurre normalmente en el ejemplo.Puede ajustar la configuración de los márgenes en CSS (margen derecho en este caso).
fuente
Use en
<div>lugar de<span>, o especifique una clase para SPAN y asígnele el atributo display: block .fuente
Hay un elemento HTML para que ™: la (ahora estandarizado)
<wbr>elemento .Te aconsejo que uses eso. Puede que no funcione en todas partes , pero es lo mejor que puede hacer sin pasar por aros.
fuente
<wbr>es para marcar puntos de interrupción en palabras muy largas, no resuelve el problema con los saltos de línea preferidoswbrelemento representa una oportunidad de salto de línea". Esto es exactamente lo que pidió OP. Deja de votar negativamente a las personas en función de lo que lees en los wikis.<wbr>.