如何使用CSS包装文本?

ker*_*lin 78 css word-wrap

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>
Run Code Online (Sandbox Code Playgroud)

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

小智 113

如果输入"AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G
Run Code Online (Sandbox Code Playgroud)

我在谷歌的几个不同的网站上采取了我的例子.我已经在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>
Run Code Online (Sandbox Code Playgroud)

  • 我添加了"word-wrap:break-word;" 但是在Firefox和IE中都没有工作(我只在这两个中测试过)...当我添加你建议的所有选项时......它有效...谢谢!!! (2认同)
  • 我不得不添加"white-space:-webkit-pre-wrap;" 获得新版本的Chrome(可能还有Safari). (2认同)

Gau*_*ena 84

试试这个.适用于IE8,FF3.6,Chrome

<body>
  <table>
    <tr>
      <td>
        <div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
      </td>
    </tr>
  </table>
</body>
Run Code Online (Sandbox Code Playgroud)

  • 这不适合我,但@ Stirling的答案确实有效. (7认同)