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


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

Respostas:


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.


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 <span>Hello </span><span> world</span>serão Helloworlde <span>Hello</span> <span>world</span>serão normais Hello world.
usuário de

2
<wbr> é 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 <span class = "Avoidwrap"> (um & nbsp; 500-429 & nbsp; v.Chr.) </span>
Sarah Trees

10
@Lodewijk: <wbr>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 <span>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; }
}

7

Uma resposta fácil é usar o caractere de espaço de largura zero. &#8203; 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 &nbsp; (bem, na verdade o juntador de palavras&#8288; ) ( 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 &#8209; ) (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 <span>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.


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, &nbsp;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.


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.


Obrigado, mas isso não funcionará porque basicamente traduz os espaços dentro de um spanelemento para &nbsp;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 é &nbsp;<wbr>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 &#8203;e <wbr>e &shy;todos permitem uma pausa (imprimindo uma pausa hífen-only-on-hífen, espaço, nada, nada, e, respectivamente), enquanto &nbsp;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 <wbr>tag. (Significa Oportunidade de Quebra de Palavras.)

Adicionar um <wbr>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.


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


13
<wbr>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: <wbr>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, <wbr> 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, <wbr> 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%;
}

-3

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


-5

Existe um elemento HTML para isso ™: o (agora padronizado) <wbr>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.


3
-1: <wbr>é 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 <wbr>.
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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.