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 Jackse 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.
Respostas:
Usando
e embrulhar o texto que quero manter junto
ele será embrulhado primeiro em blocos preferidos e depois em fragmentos menores conforme necessário.
fonte
<span>Hello </span><span> world</span>serãoHelloworlde<span>Hello</span> <span>world</span>serão normaisHello world.<wbr>não indica um lugar preferencial para quebrar a linha, mas um possível .<span>s aninhados , portanto, você pode (de fato) especificar uma hierarquia de pontos de interrupção preferidos.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:
E uma linha de CSS em sua consulta de mídia:
fonte
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:
ilegível? este é o mesmo HTML sem tags de comentário:
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.
fonte
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 owhite-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.
fonte
Com sua marcação acima, use
span { white-space:nowrap }. É tão bom quanto você pode esperar.fonte
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. <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​e<wbr>e­todos permitem uma pausa (imprimindo uma pausa hífen-only-on-hífen, espaço, nada, nada, e, respectivamente), enquanto não.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:É compatível com todos os meus principais navegadores, exceto o IE.
fonte
<wbr>tem outro propósito. Sem falar que essa resposta é uma duplicata de uma resposta que existia muito antes.<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.<wbr>se não priorizar uma quebra de linha ao longo do espaço em branco comum. Portanto, o acondicionamento ocorre normalmente no exemplo.Você pode apenas ajustar as configurações de margem em CSS (margem direita neste caso).
fonte
Use em
<div>vez de<span>, ou especifique uma classe para SPAN e dê a ela o atributo display: block .fonte
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.
fonte
<wbr>é para marcar pontos de quebra em palavras muito longas, não resolve o problema com quebras de linha preferidaswbrelemento 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.<wbr>.