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>ddd11111111111111111111111111111111</div>
Efeito: quebras de linha podem ser alcançadas
2. (Navegador Firefox) white-space:normal; word-break:break-all;overflow:hidden; Também não existe um bom método de implementação no FF. O efeito é melhor!
#wrap{espaço em branco:largura normal:200px;
ou
#wrap{word-break:break-all;largura:200px;
<div >ddd11111111111111111111111111111111111111</div>
Efeito: O contêiner está normal e o conteúdo está oculto
para mesa
1. (navegador IE) use o estilo table-layout: fixo;
| A seguir está o conteúdo citado: <estilo> <largura da tabela="80"> |
Efeito: quebras de linha podem ser feitas
2. (navegador IE) Use o estilo table-layout: fixo e nowrap
| A seguir está o conteúdo citado: <estilo> <largura da tabela="80"> |
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.
| A seguir está o conteúdo citado: <estilo> <largura da tabela=80> |
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
| A seguir está o conteúdo citado: <estilo> <largura da tabela=80> |
A largura da célula aqui deve ser definida como uma porcentagem
Efeito: exibição normal, mas sem quebra de linha (Observação: não há uma boa maneira de agrupar o conteúdo do contêiner em FF. Você só pode usar overflow para ocultar o conteúdo extra e evitar afetar o efeito geral)