我不认为CSS可以做到这一点。相反，在字符串中按常规的“字长”插入一个HTML软连字符:

ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­TGACGATG

这将在行尾的换行处显示一个连字符，这可能是您想要的，也可能不是。

注意与Firefox不同，Safari似乎将长字符串包装在<textarea>中。

对我来说这是可行的，

<td width="170px" style="word-wrap:break-word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

你也可以在另一个div中使用一个div，而不是td。我使用overflow:auto，因为它可以显示Opera和IE浏览器中的所有文本。

在你想要休息的地方放置零宽度的空间。零宽度空间为&#8203;在HTML中。例如:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGC

我的方法(当没有合适的方法插入特殊字符)通过CSS:

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

网址:http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ 还有一些额外的研究。

只是设置宽度和添加浮动为我工作:-)

width:100%;
float:left;

使用CSS方法强制换行没有空格的字符串。三种方法:

1)使用CSS的白色空间属性。为了解决浏览器不一致的问题，您必须以几种方式声明它。所以只要把你的looooong字符串放入一些块级元素(例如，div, pre, p)，并给该元素以下css:

some_block_level_tag {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

2)使用Compass中的force-wrap mixin。

3)我也在研究这个问题，我认为可能也有用(但我需要更全面地测试浏览器支持):

.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

参考资料:包装内容