断字属性如何从太空中突破？

Question

我有一个<td>带有word-break: break-all; 属性。 它可以工作，但是我有一个小问题，如果我有一个长而完整的 （没有空格）文本（大于宽度） ，那么对我来说是非常好的，就像这样：

的HTML：

<table>
    <tr>
        <td>
            testtttttttttttttttttttttttttttttttttttttttttttttttttttt
        </td>
    </tr>
</table>

CSS：

td{
    width: 50px;
    word-break: break-all;
  }

输出：（可以）

+-----------50px-----------+
|testtttttttttttttttttttttt|
|tttttttttttttttttttttttttt|
|tttt                      |
+--------------------------+

但是，当我有一个长且未集成 （带空格）的文本时，它将无法正常工作。 像这样：

<td>Hello world.., this is a test text. this is a test text.</td>

输出：

+-----------50px-----------+
|Hello world.., this is a t|
|est text. this is a test t|
|ext.                      |
+--------------------------+

我该如何解决？ 我想要这样的东西：

+-----------50px-----------+
|Hello world.., this is a  |
|test text. this is a test |
|text.                     |
+--------------------------+

Answer 1

您不需要word-break: break-all; 。 您只需要word-wrap: break-word （或overflow-wrap: break-word ）

范例 ：

 #container { width: 70%; border: 1px solid; margin: 0 auto; } table { width: 100%; table-layout: fixed; } td { word-wrap: break-word } 

 <div id="container"> <table> <tr> <td class="cc">contentttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</td> <td class="cc">Hello world.., this is a test text. this is a test text.</td> </tr> </table> </div> 

小提琴： http : //fiddle.jshell.net/m73mcm74/3/

另外，请参考您先前的问题的答案： https : //stackoverflow.com/a/31936379/1355315