如何使用CSS包装文本?(复制)

This question already has an answer here:

这个问题已经有了答案:

CSS: How do I wrap text with no whitespace inside a <td>? 9 answers
CSS:如何在中包含没有空格的文本?9的答案

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

How do I get text like this to wrap in CSS?

如何让这样的文本在CSS中封装?

5 个解决方案

#1

Try doing this. Works for IE8, FF3.6, Chrome

试着这样做。适用于IE8、FF3.6和Chrome

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

#2

If you type "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" this will produce:

如果你输入" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaarrrrrrrrrrrrrrrrrrrrrrrrrrrrrrggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg "这将会产生:

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

I have taken my example from a couple different websites on google. I have tested this on ff 5.0, IE 8.0, and Chrome 10. It works on all of them.

我从谷歌上的几个不同的网站上举了我的例子。我在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>

#3

With text-wrap, browser support is relatively weak (as you might expect from from a draft spec).

对于文本包装，浏览器支持相对较弱(正如您可能从草案规范中期望的那样)。

You are better off taking steps to ensure the data doesn't have long strings of non-white-space.

您最好采取步骤，确保数据没有非空白的长字符串。

#4

This will work everywhere.

这将工作无处不在。

<BODY>
  <TABLE style="table-layout:fixed;">
  <TR>
    <TD><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></TD>
  </TR>
  </TABLE>
 </BODY>

#5

The better option if you cannot control user input, it is to establish the css property, overflow:hidden, so if the string is superior to the width, it will not deform the design.

如果您无法控制用户输入，那么更好的选择是建立css属性，溢出:隐藏，因此如果字符串优于宽度，它将不会破坏设计。

Edited:

编辑:

I like the answer: "word-wrap: break-word", and for those browsers that do not support it, for example, IE6 or IE7, I would use my solution.

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

#1