Question

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

如何将这样的文本包装在CSS中？

Answer 1

如果输入“AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGG 这会产生：

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

我在谷歌的几个不同的网站上采取了我的例子。我已经在ff 5.0，IE 8.0和Chrome 10上测试了它。它适用于所有这些。

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    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+ */
    white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/
    word-break: break-all;
    white-space: normal;
}

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

Answer 2

尝试这样做。适用于IE8，FF3.6，Chrome

<body>
  <table>
    <tr>
      <td>
        <div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
      </td>
    </tr>
  </table>
</body>

Answer 3

使用text-wrap，浏览器支持相对较弱（正如您可能从草案规范中得到的那样）。

最好采取措施确保数据没有长字符串的非空格。

Answer 4

这将无处不在。

<body>
  <table style="table-layout:fixed;">
  <tr>
    <td><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></td>
  </tr>
  </table>
 </body>

Answer 5

如果您无法控制用户输入，那么更好的选择是建立css属性 overflow：hidden ，因此如果字符串优于宽度，则不会使设计变形。< / p>

<强>编辑：

我喜欢这个答案：“word-wrap：break-word”，对于那些不支持它的浏览器，例如IE6或IE7，我会使用我的解决方案。

如何使用CSS包装文本？

5 个答案: