Problema de quebra automática de linha, quebra automática de linha de caracteres normais é mais razoável, mas números contínuos e caracteres ingleses geralmente expandem o contêiner, o que é uma grande dor de cabeça. Melhor CSS para definir quebras de linha .wrap {layout da tabela: fixo; quebra de palavra: estouro de tudo; 1. (Navegador IE) Para caracteres ingleses contínuos e algarismos arábicos, use word-wrap: break-word ou word-break:break-all para obter quebra de linha forçada; #wrap{quebra de palavra:quebra tudo;largura:200px;} <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> Efeito: quebras de linha podem ser alcançadas 2. (Navegador Firefox) As quebras de linha de caracteres ingleses contínuos e algarismos arábicos Todas as versões do Firefox não resolvem este problema. Só podemos ocultar os caracteres que excedem o limite ou adicionar barras de rolagem ao contêiner. <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> Efeito: O contêiner está normal e o conteúdo está oculto para mesa <table style="table-layout:fixed" width="200"> Efeito: ocultar conteúdo redundante 2. (navegador IE) Use table-layout: fixa; para forçar a largura da tabela, e o td interno, th usa word-break: break-all ou word-wrap: break-word; <table width="200" style="table-layout:fixed;"> Efeito: quebras de linha podem ser feitas 3. (Navegador IE) Ao aninhar div, p, etc. em td, th, use o método de quebra de linha de div e p mencionado acima. 4. (navegador Firefox) use table-layout: fixo para forçar a largura da tabela, o td interno, use word-break: break-all; oculto; ocultar Além do conteúdo, overflow:auto não pode funcionar aqui; Efeito: ocultar mais do que conteúdo 5. (Navegador Firefox) Nest div, p, etc. em td, th, etc. Use o método mencionado acima para lidar com o Firefox para executar a caixa de código. Finalmente, a chance desse fenômeno ocorrer é muito pequena, mas para os internautas. pegadinhas não podem ser descartadas. A seguir está o efeito do exemplo mencionado <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h1><code>IE word-wrap : break-word ;</code></h1> <h1><code>Firefox/ word-break:break-all;
Aqui estouro: oculto ou automático;
================================================= ===============
Para elementos de nível de bloco, como div e p, a quebra de linha de elementos de texto normal (texto asiático e texto não asiático) tem o espaço em branco padrão: normal e será quebrada automaticamente após a largura definida.
HTML
<div id="wrap">Os elementos de quebra automática de texto (texto asiático e não asiático) têm o espaço em branco padrão:normal, quando definido</div>
css
#wrap{espaço em branco:largura normal:200px;
ou
#wrap{wrap de palavra:quebra de palavra;largura:200px;}
#wrap{quebra de palavra:quebra tudo;largura:200px;
1. (navegador IE) Use table-layout:fixed para forçar a largura da tabela e ocultar o excesso de conteúdo;
<tr>
<td>abcdefgigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</tabela>
<tr>
<td width="25%" style="word-break: break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="wrap de palavra: quebra de palavra;">abcdefgigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</tabela>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break: break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="wrap de palavra: quebra de palavra; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</tabela>
<html xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Quebra de linha de caractere</title>
<style type="texto/css">
tabela,td,th,div {borda:1px verde sólido;}
código { font-family:"Courier New", Courier, monospace;}
</estilo>
</head>
<corpo>
<h1><code>div</code></h1>
<h1><code>Todos os espaços em branco:normal;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap ainda ocorre em um elemento td que tem seu atributo WIDTH definido como um valor menor que o conteúdo desembrulhado da célula, mesmo se a propriedade noWrap estiver definida como true. Portanto, o atributo WIDTH tem precedência sobre a propriedade noWrap neste cenário</div>.
<div style="wrap de palavra: quebra de palavra; largura:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div style="word-break:break-all; largura:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>tabela</code></h1>
<h1><code>table-layout:fixo;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefgigklmnopqrstuvwxyz1234567890sssssssssssss</td>
</tr>
</tabela>
<h1><code>table-layout:fixed; quebra de palavra: quebra de tudo; quebra de palavra: quebra de palavra;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break: break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap: break-word;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</tabela>
<h1><code>FFtable-layout:fixo;overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break: break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="wrap de palavra: quebra de palavra; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</tabela>
</body>
</html>