表のセル<td>の内容を強制的に折り返す方法は？

146

ページ全体*折り返し可能はmain.cssファイルで定義されています

/* Wrappable cell
* Add this class to make sure the text in a cell will wrap.
* By default, data_table tds do not wrap.
*/
td.wrappable,
table.data_table td.wrappable {
    white-space: normal;
}

ページ全体がここにあります：

<%@ include file="../../include/pre-header.html" %>
<form id="commentForm" name="commentForm" action="" method="post">



    <ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
        <ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?   entryId=${entry.entryId}" />
        <table class="data_table vert_scroll_table">



            </tr>
            <tr>
                <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>
            </tr>


            <c:forEach var="comments" items="${entry.comments}">


                <tr id="id${comments.id}">
                    <td id="comments-${comments.id}" class="wrappable" style="width:400px;">${comments.comment}</td>
                </tr>



            </c:forEach>
            <c:if test="${lock.locked || form.entryId < 0 }">
                <%-- This is the row for adding a new comment. --%>
                    <tr id="commentRow">
                        <td><input type="text" id="comment" name="comment" size="50" maxlength="250" onkeypress="javascript:return noenter();" />
                            <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
                        </td>

                    </tr>
            </c:if>

        </table>

    </ctl:vertScroll>
</form>

送信するたびに伸びるだけです。
このページはdiv内にもあります。divとテーブルの幅も設定する必要がありますか？

html  css  html-table 
— Doc Holiday
ソース
1
どこを定義していwrappableますか？
— 2011
2
.wrappableクラスはどこで定義されていますか？どのブラウザを使用していますか？
— ダニ
使用されているブラウザは特に重要です---古いバージョンのIEはをサポートしていませんmax-width。問題になる可能性のあるものは他にもたくさんあり、それ以上の情報がないと言うことは不可能ですが、それは破られる可能性があるものです。
— Chris Morgan
私は基本的に、送信したテキストを幅内に収め、テーブルを引き伸ばさないようにしようとしています
— Doc Holiday
これは、stackoverflow.com
— a / 26560829/1924979

回答:

291

table-layout:fixedテーブルとword-wrap:break-wordtdで使用します。

この例を見てください：

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

デモ：

table {border-collapse:collapse; table-layout:fixed; width:310px;}
       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
       <table>
          <tr>
             <td>1</td>
             <td>Lorem Ipsum</td>
             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
          </tr>
          <tr>
             <td>2</td>
             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
          </tr>
          <tr>
             <td>3</td>
             <td></td>
             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
          </tr>
       </table>
スニペットを展開

— jim31415
ソース
回答の上部にborder-collapse：collapseビットを追加して、回答を視覚的にスキャンしている人が完全な回答をすばやく取得できるようにする必要があります。
— dwoodwardgb 2017年
もう少し変更テーブル{border-collapse：collapse; table-layout：fixed; word-wrap：break-word;} table td {width：100px; word-wrap：break-word;}
— Kuldeep Kumar
44

私にとってはその作品。

<style type="text/css">

 td {

    /* css-3 */
    white-space: -o-pre-wrap; 
    word-wrap: break-word;
    white-space: pre-wrap; 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 

}

そしてテーブル属性は：

table { 
  table-layout: fixed;
  width: 100%
}

— ラベクシュアグラワル
ソース
15 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— ジャフスター
ソース
6
多分あなたはコードを説明できるので誰にとってもそれが明確になるでしょう
— フェデリコ
きちんとしたテーブルを示していますが、コンテンツはカットされています。すなわち。内容が大きいと言葉が見えない。 overflow:hidden
— wpcoder
ただし、最大幅をハードコーディングするのはよくありません。大きな解像度などにも対応できません。テーブルがサイズに正しく応答できるようにしたいと考えています。
— user959690
4

Bootstrapレスポンシブテーブルを使用している場合、特定の列の最大幅を設定してテキストを折り返し、この列のスタイルを次のように機能させるだけです。

max-width:someValue;
word-wrap:break-word
— 風水漢
ソース
5
注意max-widthでなければならないpx価値、ない%
— maxedison
3

これは、セルに「かなり」のJSONを表示する必要があるときに機能しました。

td { white-space:pre }

white-spaceプロパティの詳細：

  • normal ：この値は、ユーザーエージェントに一連の空白を折りたたみ、必要に応じて行ボックスを埋めるために改行するよう指示します。

  • pre：この値は、ユーザーエージェントが空白のシーケンスを折りたたむのを防ぎます。
    行は、保持されている改行文字でのみ改行されます。

  • nowrap：この値はと同様に空白を折りたたみますがnormal、テキスト内の改行を抑制します。

  • pre-wrap：この値は、ユーザーエージェントが空白のシーケンスを折りたたむのを防ぎます。
    保存された改行文字で、および必要に応じて行ボックスを埋めるために、行が分割されます。

  • pre-line：この値は、ユーザーエージェントに空白のシーケンスを折りたたむように指示します。
    保存された改行文字で、および必要に応じて行ボックスを埋めるために、行が分割されます。

（また、ソースで詳細を参照してください。）

— Ashleedawg
ソース
0

列を修正したい場合は、幅を設定する必要があります。例えば：

<td style="width:100px;">some data</td>

— ユージーン
ソース
1
私はそれを試しました...何らかの理由でテーブルを拡大し続けます<td id = "comments-$ {comments.id}" class = "wrappable" style = "width：100px"> $ {comments.comment} </ td >
— Doc Holiday、
0

これは、（ファイルパス名などの）長い文字列があり、特定の文字（スラッシュなど）の文字列のみを分割したい場合に問題に取り組むもう1つの方法です。HTMLのスラッシュの直前（または直後）にUnicodeゼロ幅スペース文字を挿入できます。

— マークラカタ
ソース
0 
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

ここでは、バイナリデータとその動作をテストしました。

— ジャイプ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.