web-dev-qa-db-ja.com

CSSを使用してテキストをラップする方法は？

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

このようなテキストを取得してCSSでラップするにはどうすればよいですか？

cssword-wrap
75
keruilin

これをやってみてください。 IE8、FF3.6、Chromeで動作します

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

「AAAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGRGGGGGGGGGGGGGGGGGGGGG」と入力すると、次の結果が生成されます。

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Googleのいくつかの異なるWebサイトから例を取り上げました。これを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>
105
Stirling

これはどこでも動作します。

<body>
  <table style="table-layout:fixed;">
  <tr>
    <td><div style="Word-wrap: break-Word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></td>
  </tr>
  </table>
 </body>
1
Atul.Bajare

text-wrap の場合、ブラウザのサポートは比較的弱いです（ドラフト仕様から予想されるように）。

データに空白以外の長い文字列が含まれないようにするための手順を実行することをお勧めします。

1
Quentin

ユーザー入力を制御できない場合のより良いオプションは、cssプロパティoverflow：hiddenを確立することです。したがって、文字列が幅より優れている場合、デザインは変形しません。

編集済み：

「Word-wrap：break-Word」という答えが好きです。IE6やIE7など、それをサポートしていないブラウザーの場合は、ソリューションを使用します。

0
netadictos