html (+ css): indica un lugar preferido para un salto de línea

109

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 Jacks

y 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.

Jason S
fuente
puede utilizar espacios que no se rompan dentro de los tramos.
Gabriele Petrioli
3
Pero no quiero usar espacios que no se rompan. Me encantaría usar espacios de "no-quiero-romper-aquí-pero-lo-haré-si-tengo-que-hacer", pero hasta donde yo sé, existen.
Jason S
@Jason .. te siento .. pero no es posible .. agregó una respuesta.
Gabriele Petrioli
Maldita sea, eso es lo que sucede cuando los científicos informáticos escriben algoritmos de renderizado sin la entrada de tipógrafos.
Jason S
1
¡debe aceptar la respuesta de @ EggertJóhannesson ya que proporciona una buena solución!
Gabriele Petrioli

Respuestas:

156

Mediante el uso

span.avoidwrap { display:inline-block; }

y envolver el texto en el que quiero mantener juntos

<span class="avoidwrap"> Text </span>

se envolverá primero en bloques preferidos y luego en fragmentos más pequeños según sea necesario.

Eggert Jóhannesson
fuente
16
¡Funciona genial! Solo una nota adicional: los espacios al principio y al final de un bloque en línea se ignoran, por lo que para delimitar el texto en bloques por espacio, debe colocarlo entre bloques en línea. Por ejemplo, si los intervalos se diseñaron para convertirse en bloques en línea, entonces <span>Hello </span><span> world</span>será Helloworldy <span>Hello</span> <span>world</span>será normal Hello world.
usuario
2
<wbr> es más semántico y deja el control en el navegador, lo que generalmente es algo bueno. En este caso, hace posible la ruptura cuando sea vital.
Lodewijk
Funciona muy bien, cuando es importante, que caracteres como "-" no se rompan. Ejemplo: Perikles <span class = "evitarwrap"> (um & nbsp; 500-429 & nbsp; v.Chr.) </span>
Sarah Trees
10
@Lodewijk: <wbr>no indica un lugar preferido para romper la línea, pero sí uno posible .
Dan Dascalescu
1
Tenga en cuenta que esta técnica también funciona para <span>s anidados , por lo que puede (en efecto) especificar una jerarquía de puntos de interrupción preferidos.
Michael Dyck
24

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:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

Y una línea de CSS en su consulta de medios:

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}
Stephan Weinhold
fuente
7

Una respuesta fácil es usar el carácter de espacio de ancho cero. &#8203; Se usa para hacer espacios de ruptura dentro de palabras en puntos específicos .

¿Hace exactamente lo contrario del espacio que no se separa &nbsp; (bueno, en realidad el ensamblador de palabras&#8288; ) ( 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 &#8209; ) (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:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

¿ilegible? este es el mismo HTML sin etiquetas de comentarios:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

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.

Comunidad
fuente
1
¿Qué son los hacks de span?
Jason S
Las otras respuestas aprovechan las etiquetas de intervalo.
También quiero señalar que, si bien esta solución no parece ser la más simple, es la más confiable, porque esas entidades no cambian ni deben cambiar la representación semántica a menudo en los navegadores, analizadores de correo electrónico o cualquier otro analizador HTML.
3

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 &nbsp;sin ruptura, pero solo entre las palabras que van juntas ( lo que tiene en intervalos, pero no después de la coma ), o puede usar white-space:nowrapcomo mencionó @Marcel.

Ambas soluciones hacen lo mismo, y ambas no romperán un grupo de palabras si no encaja por sí solo.

Gabriele Petrioli
fuente
argh. :-( eso apesta, significa que tengo que vivir con eso, o tengo que intentar detectar largas filas por mi cuenta en un intento de derrotar el algoritmo de ruptura de línea.
Jason S
Edité tu respuesta para proporcionar un enlace a la solución alternativa, ya que casi no sigo leyendo debido a la forma en que está redactada tu primera línea.
arootbeer
@arootbeer: apoyo tu edición, pero Gaby la revirtió. Gaby: ¿por qué? ¿Quieres engañar a los usuarios?
Dan Dascalescu
@DanDascalescu, ¿deberían cambiarse todas las respuestas para que apunten a la aceptada en la misma página? Mi respuesta tiene 1 ( suma ) voto y hay una respuesta aceptada con 48 votos. Estoy bastante seguro de que el aceptado es el que recibe la atención ( y con razón ). Además de eso, insisto en que no hay forma de cambiar el algoritmo de ruptura utilizado ( como pide el OP )
Gabriele Petrioli
1
compruebe que mi solución utiliza su propia lógica en su contra. combine eso con cualquiera de las soluciones de tramo, entonces tendrá el control completo del algoritmo de
2

Con su marcado anterior, use span { white-space:nowrap }. Es tan bueno como puedes esperar realmente.

Marcel
fuente
Gracias, pero eso no funcionará porque básicamente traduce espacios dentro de un spanelemento &nbsp;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.
Jason S
@Jason S: Agregué otras opciones a mi respuesta.
Marcel
¿en qué se &nbsp;<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 &#8203;y <wbr>y &shy;todos permiten una pausa (imprimiendo un guión, un espacio, nada, nada y un guión solo en la pausa, respectivamente), mientras &nbsp;que no.
Jason S
@Jason S: uso de ejemplo agregado.
Marcel
Lo acabo de probar y no parece tener prioridad sobre los espacios para los saltos de línea. La prioridad es lo que necesito. Si el comportamiento de ruptura para un carácter o elemento diferente es sí o no, entonces no hay solución para mi problema. Si hay prioridades relativas para romper líneas, entonces podría tener una solución.
Jason S
0

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:

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.

ACarter
fuente
12
-1. ¿Por qué no hizo la prueba antes de asesorar? No funciona. <wbr>tiene otro propósito. Sin mencionar que esta respuesta es un duplicado de una respuesta que existía mucho antes.
usuario
1
WBR no tiene otro propósito. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Lodewijk
13
<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.
Jukka K. Korpela
5
Esto no funciona en absoluto en ningún navegador. La respuesta es incorrecta: <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.
adrian
3
Para aclarar, <wbr> tiene la intención de señalar "aquí hay un lugar donde puede romper", cuando esa posición se consideraría de otra manera dentro de una palabra . Dice "tratar el lugar entre estos dos personajes como si hubiera un espacio allí", no "prefiera romper aquí". Si ya hay un espacio, <wbr> no tiene ningún significado.
Punto
-1

Puede ajustar la configuración de los márgenes en CSS (margen derecho en este caso).

text {
    margin-right: 20%;
}
gooflord
fuente
-3

Use en <div>lugar de <span>, o especifique una clase para SPAN y asígnele el atributo display: block .

justacoder
fuente
-5

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.

Mathias Bynens
fuente
3
-1: <wbr>es para marcar puntos de interrupción en palabras muy largas, no resuelve el problema con los saltos de línea preferidos
usuario
4
@ user3075942 Cita directa de la especificación : "El wbrelemento 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.
Mathias Bynens
3
Si, oportunidad . Pero los navegadores ya tienen la oportunidad de romper los espacios. La pregunta es cómo decirle a un navegador en qué espacios es preferible romper.
usuario
1
… Y la respuesta es usar <wbr>.
Mathias Bynens
8
No, esa no es la respuesta. No aumenta la probabilidad de uso de una posibilidad de punto de ruptura preexistente particular; solo agrega una nueva posibilidad de punto de ruptura, donde aún no existe uno. Tener dos posibilidades seguidas no sirve de nada. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Torin Finnemann