580 votes

Retour à la ligne dans une table HTML

J'ai été en utilisant word-wrap: break-word de renvoyer le texte en divs et spans. Cependant, il ne semble pas fonctionner dans les cellules de tableau. J'ai un set de table pour width:100%, avec une ligne et deux colonnes. Texte en colonnes, bien que de style ci-dessus, word-wrap, ne pas envelopper. Il provoque le texte à aller au-delà des limites de la cellule. Ce qui se passe sur Firefox, Google Chrome et Internet Explorer.

Voici ce que la source ressemble à:

<table style="width: 100%;">
  <tr>
    <td align="left"><div style="word-wrap: break-word;">Long Content</div></td>
    <td align="right"><span style="display: inline;">Short Content</span></td>
  </tr>
</table>

"Un Contenu Long" est plus large que les limites de ma page, mais il ne rompt pas avec le HTML ci-dessus. J'ai essayé les suggestions ci-dessous de l'ajout d' text-wrap:suppress et text-wrap:normal, mais ni aidé.

639voto

Marc Stober Points 3856
<p>Les ouvrages suivants pour moi dans Internet Explorer. Remarquez l’ajout de la <code></code> attribut CSS<pre><code></code></pre></p>

172voto

Pratik Stephen Points 592
<pre><code></code><p><pre><code></code></pre></pre>

128voto

Rick Grundy Points 511
<p>Longtemps tourné, mais vérifiez avec <a href="http://en.wikipedia.org/wiki/Firebug_%28software%29" rel="nofollow">Firebug</a> (ou similaire) que vous n’êtes pas accidentellement qui héritent de la règle suivante :<pre><code></code></pre><p><a href="http://www.w3schools.com/cssref/pr_text_white-space.asp" rel="nofollow">Cela peut se substituer à</a> votre comportement de rupture de ligne spécifiée.</p></p>

50voto

psychotik Points 11937
<p>Finalement, il n’y est aucun bonne façon d’y parvenir. Est l’ajout le plus proche, je suis venu « débordement : hidden ; » à la div autour de la table et de perdre le texte. La vraie solution semble être d’abandonner la table cependant. À l’aide de balises div et le positionnement relatif j’ai pu obtenir le même effet, moins l’héritage de<code></code></p>

31voto

loungerdork Points 659
<p>Comme mentionné, mettre le texte dans <code></code> fonctionne presque. Il suffit de spécifier le <code></code> de la <code></code> , qui est chanceux mises en page statiques.<p>Cela fonctionne sur FF 3.6, IE 8, Chrome.</p><pre><code></code></pre></p>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X