Dicas para realizar quebra automática de linha com CSS

Todo mundo sabe que o inglês ou os números contínuos podem fazer o contêiner se expandir e não podem ser agrupados automaticamente de acordo com o tamanho do contêiner. Veja como envolvê-los usando CSS!

para div

1. (navegador IE) white-space:normal; word-break:break-all; o primeiro aqui segue o padrão.

#wrap{espaço em branco:largura normal:200px;
ou
#wrap{quebra de palavra:quebrar tudo;largura:200px;}
<div id="wrap">ddd11111111111111111111111111111</div>

Efeito: quebras de linha podem ser alcançadas

2. (Navegador Firefox) white-space:normal; word-break:break-all;overflow:hidden; Não existe um bom método de implementação no mesmo FF. Você só pode ocultar ou adicionar barras de rolagem, mas é claro que não há barras de rolagem. . O efeito é melhor!

#wrap{espaço em branco:largura normal:200px;
ou
#wrap{word-break:break-all;largura:200px;
<div id="wrap">ddd11111111111111111111111111111111111111</div>

Efeito: O contêiner está normal e o conteúdo está oculto

para mesa

1. (navegador IE) Use o estilo table-layout:fixed;

<estilo>
.tb{layout da tabela: fixo}
</estilo>
<tabela class="tbl" largura="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</tabela>

Efeito: pode quebrar linhas 2. (navegador IE) usar estilo

<estilo>
.tb {layout da tabela: fixo}
</estilo>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</tabela>

Efeito: quebras de linha podem ser feitas

3. (Navegador IE) Use o estilo table-layout: fixa e nowrap ao usar uma porcentagem para corrigir o tamanho td.

<estilo>
.tb{layout da tabela: fixo}
</estilo>
<tabela class="tb" largura=80>
<tr>
<largura td=25% agorarap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefgigklmnopqrstuvwxyz 1234567890</td>
</tr>
</tabela>

Efeito: Ambos os TDs quebram normalmente

4. (Navegador Firefox) Use o estilo table-layout: fixo e nowrap ao usar porcentagem para corrigir o tamanho td e use div

<estilo>
.tb {layout da tabela: fixo}
.td {estouro: oculto;}
</estilo>
<classe da tabela=tb largura=80>
<tr><td largura=25% class=td agorarap>
<div>abcdefgigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefgigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</tabela>

A largura da célula aqui deve ser definida como uma porcentagem: ela é exibida normalmente, mas não pode ser quebrada.

Nota: Não há uma boa maneira de agrupar o conteúdo do contêiner no FF. Você só pode usar o overflow para ocultar o conteúdo extra e evitar afetar o efeito geral.