CSS：如何在< td&gt ;?中封装不含空格的文字 [英] CSS: How do I wrap text with no whitespace inside a <td>?

问题描述

我使用过：

  word-break：break-all; 
 table-layout：fixed 
  

p>

更新：我决定改变设计，使它不需要换行;试图整理一个CSS修复/黑客是证明太令人沮丧和耗时。

解决方案

尝试这个，我认为这将工作对于类似AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG
将产生

  AARRRRRRRRRRRRRRRRRRRR 
 RRGGGGGGGGGGGGGGGGGGGG 
 G 
  

我从Google上几个不同的网站上取了我的例子。我已经在ff 5.0，IE 8.0和Chrome 10上测试过了。

  .wrapword {
 white-space：重要的; / * Mozilla，从1999年* / 
白空间：-webkit-pre-wrap; / * Chrome& Safari * / 
 white-space：-pre-wrap; / * Opera 4-6 * / 
白色空格：-o-pre-wrap; / * Opera 7 * / 
 white-space：pre-wrap; / * css-3 * / 
 word-wrap：break-word; / * Internet Explorer 5.5+ * / 
 word-break：break-all; 
 white-space：normal; 
} 
 
< table style =table-layout：fixed; width：400px> 
< tr> 
< td class =wrapword> 
< / td> 
< / tr> 
< / table> 
  

I've used:

word-break:break-all;
table-layout:fixed

and the text wraps in Chrome but not Firefox.

Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming.

解决方案

Try this, I think this will work for something like "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" will produce

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

I have taken my example from a couple different websites on Google. I have tested this on ff 5.0, IE 8.0, and Chrome 10.

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

这篇关于CSS：如何在< td&gt ;?中封装不含空格的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！