CSS:如何在<td>中包装没有空格的文本？

Question

我用过:

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

并且文字包含在Chrome中但不包含在Firefox中.

更新:我决定更改设计,因此它不需要包装; 试图整理CSS修复/黑客被证明太令人沮丧和耗时.

Answer 1

尝试这个,我认为这将适用于像"AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

我从谷歌的几个不同网站上采取了我的例子.我在ff 5.0,IE 8.0和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;         /* CSS3 */
    word-wrap: break-word;         /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

Answer 2

使用CSS3 word-wrap: break-word;.适用于基于WebKit的浏览器(Safari,Chrome).

更新:我忘记了,有问题的元素必须隐式或显式定位为固定元素或显示为块元素.对于表格单元格(td),请使用display: inline-block;.

Answer 3

对于自动表格布局,尝试将相关的td组合为max-width和word-wrap属性.

例如: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

在Firefox 32,Chrome 37和IE11中测试过.

Answer 4

这是OP提出的高级版本.

有时候,会发生什么事情,我们的客户希望我们在断字后给出' - '到行尾.

喜欢

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

打破

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

因此,如果支持,则会有新的CSS属性,通常在最新的浏览器中支持.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

我正在使用这个.

我希望有人会有这样的要求.

Answer 5

设置标签的列宽td。