html (+ css): denotando um lugar preferido para uma quebra de linha

109

Digamos que eu tenha este texto que desejo exibir em uma célula de tabela 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

e quero que a linha quebre preferencialmente após uma das vírgulas.

Existe uma maneira de dizer ao renderizador de HTML para tentar quebrar em algum ponto designado, e fazer isso antes de tentar quebrar depois de um dos espaços, sem usar espaços não separáveis? Se eu usar espaços não separáveis, a largura ficará maior incondicionalmente. Eu quero que a quebra de linha aconteça após um dos espaços, se o algoritmo de quebra de linha tentou primeiro com as vírgulas e não consegue fazer a linha caber.

Tentei envolver fragmentos de texto em elementos, mas isso não parece ajudar em nada.

<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 o comportamento do CSS3text-wrap: avoid é o que eu quero, mas não consigo fazê-lo funcionar.

html css word-wrap

— Jason S
fonte

você pode usar espaços não separáveis dentro dos vãos.

— Gabriele Petrioli

3

Mas não quero usar espaços não separáveis. Adoraria usar os espaços "não-quero-quebrar-aqui-mas-vou-se-precisar", mas, pelo que sei, eles existem.

— Jason S,

@Jason .. eu sinto você .. mas não é possível .. adicionou uma resposta.

— Gabriele Petrioli

Droga, isso é o que acontece quando os cientistas da computação escrevem algoritmos de renderização sem a entrada de tipógrafos.

— Jason S,

1

você deve aceitar a resposta de @ EggertJóhannesson, pois ela oferece uma boa solução alternativa!

— Gabriele Petrioli

156

Usando

span.avoidwrap { display:inline-block; }

e embrulhar o texto que quero manter junto

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

ele será embrulhado primeiro em blocos preferidos e depois em fragmentos menores conforme necessário.

— Eggert Jóhannesson
fonte

16

Funciona bem! Apenas uma observação adicional: os espaços no início e no final de um bloco embutido são ignorados, de modo que para delimitar o texto em blocos por espaço você precisa colocá-lo entre os blocos embutidos. Por exemplo, se os vãos foram estilizados para se tornarem blocos embutidos, então Hello worldserão Helloworlde Hello worldserão normais Hello world.

— usuário de

2

é mais semântico e deixa o controle no navegador, o que geralmente é bom. Nesse caso, torna possível a quebra quando vital.

— Lodewijk de

Funciona muito bem - quando é importante, caracteres como "-" não quebram. Exemplo: Perikles (um & nbsp; 500-429 & nbsp; v.Chr.)

— Sarah Trees

10

@Lodewijk: não indica um lugar preferencial para quebrar a linha, mas um possível .

— Dan Dascalescu

1

Observe que essa técnica também funciona para s aninhados , portanto, você pode (de fato) especificar uma hierarquia de pontos de interrupção preferidos.

— Michael Dyck

24

Há uma solução RWD muito legal do Dan Mall que eu prefiro. Vou adicioná-lo aqui porque algumas outras questões sobre quebras de linha responsivas estão marcadas como duplicatas desta.
No seu caso, você teria:

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

E uma linha de CSS em sua consulta de mídia:

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

— Stephan Weinhold
fonte

7

Uma resposta fácil é usar o caractere de espaço de largura zero.  Ele é usado para fazer intervalos de quebra dentro de palavras em pontos específicos .

Faz exatamente o oposto do espaço não separável   (bem, na verdade o juntador de palavras⁠ ) ( juntador de palavras é a versão de largura zero do espaço não separável )

(há também outros códigos não separáveis, como o hífen não separável ‑ ) (aqui está uma resposta extensa sobre diferentes 'variantes' de nbsp )

Se você quer uma solução HTML-only (sem CSS / JS), você pode usar uma combinação do espaço de largura zero e o espaço não-quebra , no entanto, este seria realmente confuso , e escrever uma versão legível exige um pouco de esforço .

ctrl+ c, ctrl+ vajuda

exemplo:

   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

ilegível? este é o mesmo HTML sem tags de comentário:

   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

No entanto, como a renderização de html de e-mail não é totalmente padronizada, é bom para esse tipo de uso, pois esta solução não usa CSS / JS

Além disso, se você usar isso em combinação com qualquer uma das soluções baseadas, você terá controle total do algoritmo de quebra de linha

(nota editorial :)

O único problema que vejo que você tem é se você deseja alterar os pontos de quebra preferenciais dinamicamente. Isso exigiria manipulação JS constante de cada um dos spans de tamanho proporcional e ter que lidar com essas entidades HTML no texto.

— Comunidade
fonte

1

o que são span hacks?

— Jason S

A outra responde tirando proveito das tags span.

Também quero observar que, embora essa solução não pareça ser a mais simples, é a mais confiável, porque essas entidades não alteram e não devem alterar a representação semântica com frequência em navegadores, analisadores de e-mail ou qualquer outro analisador HTML.

3

A resposta é não ( você não pode alterar o algoritmo de quebra de linha usado ).

Mas existem algumas soluções alternativas (a melhor é a resposta aceita )

Você pode chegar perto com o espaço não separável,  mas apenas entre palavras que andam juntas (o que você tem em spans, mas não depois da vírgula ), ou você pode usar o white-space:nowrapcomo @Marcel mencionado.

Ambas as soluções fazem a mesma coisa e ambas não irão quebrar um grupo de palavras se ele não se encaixar sozinho.

— Gabriele Petrioli
fonte

argh. :-( isso fede, significa que ou tenho que conviver com isso ou preciso tentar detectar as longas filas sozinho na tentativa de derrotar o algoritmo de quebra de linha.

— Jason S

Editei sua resposta para fornecer um link para a solução alternativa, pois quase não continuei lendo por causa da forma como sua primeira linha está redigida.

— arootbeer

@arootbeer: Apoio sua edição, mas Gaby a reverteu. Gaby: por quê? Você quer enganar os usuários?

— Dan Dascalescu

@DanDascalescu, todas as respostas devem ser alteradas para apontar para a aceita na mesma página? Minha resposta tem 1 ( soma ) voto e foi aceita com 48 votos. Tenho certeza de que o aceito é o que está recebendo a atenção ( e com razão ). Além disso, insisto que não há como alterar o algoritmo de quebra utilizado ( como pede o OP )

— Gabriele Petrioli 09/07/2015

1

verifique se minha solução usa sua própria lógica contra você. combine isso com qualquer uma das soluções de span, então você tem controle total do algoritmo de quebra de linha

2

Com sua marcação acima, use span { white-space:nowrap }. É tão bom quanto você pode esperar.

— Marcel
fonte

Obrigado, mas isso não funcionará porque basicamente traduz os espaços dentro de um spanelemento para  e impede que os espaços sejam quebrados. Eu só quero desencorajar o renderizador de quebrar entre um dos meus itens, mas se for necessário, eu quero que faça isso.

— Jason S,

@Jason S: Eu adicionei outras opções à minha resposta.

— Marcel

como é  diferente de um espaço? Pelo que posso dizer, as opções são: um determinado personagem permite uma pausa ou não. So '-' e '' e e e todos permitem uma pausa (imprimindo uma pausa hífen-only-on-hífen, espaço, nada, nada, e, respectivamente), enquanto  não.

— Jason S,

@Jason S: Adicionado exemplo de uso.

— Marcel

Acabei de experimentar e não parece ter prioridade sobre os espaços para quebra de linha. A prioridade é o que eu preciso. Se o comportamento de quebra de um personagem ou elemento diferente for sim ou não, não há solução para o meu problema. Se houver prioridades relativas de quebra de linha, talvez eu tenha uma solução.

— Jason S,

1

Nova resposta agora que temos HTML5:

HTML5 apresenta a tag. (Significa Oportunidade de Quebra de Palavras.)

Adicionar um informa ao navegador para quebrar lá antes de qualquer outro lugar, então é fácil fazer as palavras quebrarem depois de vírgulas:

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

É compatível com todos os meus principais navegadores, exceto o IE.

— ACarter
fonte

12

-1. Por que você não testou antes de aconselhar? Não funciona. tem outro propósito. Sem falar que essa resposta é uma duplicata de uma resposta que existia muito antes.

— usuário

1

WBR não tem outro propósito. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

— Lodewijk

13

apenas cria uma oportunidade de descanso; não “diz ao navegador para quebrar lá antes de qualquer outro lugar”. Usado antes de um espaço, normalmente é inútil, uma vez que os espaços são normalmente oportunidades de quebra de linha.

— Jukka K. Korpela

5

Isso não funciona em nenhum navegador. A resposta está errada: se não priorizar uma quebra de linha ao longo do espaço em branco comum. Portanto, o acondicionamento ocorre normalmente no exemplo.

— Adrian

3

Para esclarecer, pretende sinalizar "aqui é um lugar que você pode quebrar", quando essa posição seria considerada dentro de uma palavra . Diz "trate o ponto entre esses dois personagens como se houvesse um espaço ali", não "prefira quebrar aqui". Se já existe um espaço, não tem significado.

— Ponto

-1

Você pode apenas ajustar as configurações de margem em CSS (margem direita neste caso).

text {
    margin-right: 20%;
}

— pateta
fonte

-3

Use em <div>vez de , ou especifique uma classe para SPAN e dê a ela o atributo display: block .

— justacoder
fonte

-5

Existe um elemento HTML para isso ™: o (agora padronizado) elemento .

Eu aconselho você a usar isso. Pode não funcionar em todos os lugares , mas é o melhor que você pode fazer sem passar por obstáculos.

— Mathias Bynens
fonte

3

-1: é para marcar pontos de quebra em palavras muito longas, não resolve o problema com quebras de linha preferidas

— usuário

4

@ user3075942 Citação direta da especificação : “O wbrelemento representa uma oportunidade de quebra de linha.” Isso é exatamente o que o OP pediu. Pare de votar contra as pessoas com base no que você lê nos wikis.

— Mathias Bynens

3

Sim, oportunidade . Mas os navegadores já têm a oportunidade de quebrar em espaços. A questão é como dizer a um navegador em que espaços é preferível quebrar.

— usuário

1

… E a resposta é usar .

— Mathias Bynens,

8

Não, essa não é a resposta. Isso não aumenta a probabilidade de uso de uma posibilidade de ponto de interrupção pré-existente particular; ele apenas adiciona uma nova possibilidade de ponto de interrupção, onde ainda não existe um. Ter duas possibilidades consecutivas não tem qualquer utilidade. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

— Torin Finnemann