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）

<强> 实施例 ：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

此外，请参阅您之前问题的答案：https://stackoverflow.com/a/31936379/1355315

断字财产如何突破空间？

1 个答案: