Tablo hücresi <td> içeriğini sarmaya nasıl zorlayabilirim?

149

İşte tüm sayfa * sarmalanabilir bir main.css dosyasında tanımlanmıştır

/* 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;
}

İşte tüm sayfa:

<%@ 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>

Her teslimiyetimde sadece esnetiyor.
Bu sayfa da bir div içindedir. Div ve tablonun genişliğini de ayarlamam gerekir mi?

html  css  html-table 
— Doc Holiday
kaynak
1
Nereyi tanımlıyorsunuz wrappable?
— canon
2
.wrappableSınıf nerede tanımlanır? hangi tarayıcıyı kullanıyorsun?
— Dani
Kullanılan tarayıcı özellikle önemlidir - IE'nin eski sürümleri desteklemez max-width. Sorun olabilecek başka birçok şey var ve daha fazla bilgi olmadan söylemek imkansız, ama bu kırılabilecek bir şey.
— Chris Morgan
Im temelde sadece bunu sybmit sonra tabloyu germek bir genişlik içinde kalmak sunulan metin tutmak değil çalışıyorum
— Doc Holiday
— Harsh Vakharia

Yanıtlar:

298

Kullanım table-layout:fixedtablosundaki ve word-wrap:break-wordtd içinde.

Bu örneğe bakın:

<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>

DEMO:

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>
Snippet'i genişlet

— jim31415
kaynak
Cevabınızın üst kısmına border-collapse: collapse bitini eklemelisiniz, böylece cevabınızı görsel olarak tarayan insanlar tam cevabı hızlıca alabilirler.
— dwoodwardgb
biraz daha fazla değişiklik tablosu için {border-collapse: collapse; tablo düzeni: sabit; kelime sarma: kesme-kelime;} tablo td {genişlik: 100px; kelime kaydırma: ara-kelime;}
— Kuldeep Kumar
45

Benim için çalışıyor.

<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; 

}

Ve tablo özelliği:

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

— Lavekush Agrawal
kaynak
16 
td {
overflow: hidden;
max-width: 400px;
word-wrap: break-word;
}
— Jafstar
kaynak
6
belki kodu açıklayabilirsiniz, böylece herkes için
— Federico
1
düzgün bir tablo gösterir, ancak içerik kesilir; yani. içeriği büyükse bazı kelimeleri göremiyorum. overflow:hidden
— wpcoder
Maksimum genişliği sabit kodlamak yine de iyi değildir. Büyük çözünürlüklere vb. Ölçeklenmez. Tablonun boyuta doğru yanıt vermesine izin vermek istiyorsunuz.
— user959690
4

Bootstrap duyarlı tablo kullanıyorsanız, yalnızca belirli bir sütun için maksimum genişliği ayarlamak ve metin sarma yapmak istiyorsanız, bu sütunun stilini de aşağıdaki gibi yapın

max-width:someValue;
word-wrap:break-word
— Feng Han
kaynak
5
Bunun max-widthbir pxdeğer olması gerektiğini unutmayın%
— maxedison
3

Bu, bir hücrede "güzel" JSON görüntülemem gerektiğinde benim için çalıştı:

td { white-space:pre }

white-spaceMülk hakkında daha fazla bilgi :

  • normal : Bu değer, kullanıcı aracılarını beyaz boşluk dizilerini daraltmaya ve satır kutularını doldurmak için gerektiği şekilde kesmeye yönlendirir.

  • pre: Bu değer, kullanıcı aracılarının beyaz boşluk dizilerini daraltmasını önler.
    Satırlar yalnızca korunmuş satırsonu karakterlerinde kesilir.

  • nowrap: Bu değer normal, olduğu gibi beyaz boşluğu daraltır , ancak metin içindeki satır sonlarını gizler.

  • pre-wrap: Bu değer, kullanıcı aracılarının beyaz boşluk dizilerini daraltmasını önler.
    Çizgiler, korunmuş yeni satır karakterlerinde ve gerektiğinde satır kutularını doldurmak için kesilir.

  • pre-line: Bu değer, kullanıcı aracılarını beyaz boşluk dizilerini daraltmaya yönlendirir.
    Çizgiler, korunmuş yeni satır karakterlerinde ve gerektiğinde satır kutularını doldurmak için kesilir.

(Ayrıca, kaynakta daha fazlasını görün .)

— Ashleedawg
kaynak
0

Sütunu düzeltmek istiyorsanız genişliği ayarlamalısınız. Örneğin:

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

— Eugene
kaynak
1
Bunu denedim ... nedense tabloyu genişletmeye devam ediyor <td id = "comments - $ {comments.id}" class = "wrappable" style = "width: 100px"> $ {comments.comment} </ td >
— Doc Holiday
0

Uzun dizeleriniz varsa (dosya yolu adları gibi) ve dizeleri yalnızca belirli karakterlerde (eğik çizgi gibi) kırmak istiyorsanız, bu sorunu çözmenin başka bir yoludur. HTML'deki eğik çizgilerin hemen önüne (veya arkasına) Unicode Sıfır Genişlikli Boşluk karakterleri ekleyebilirsiniz .

— Mark Lakata
kaynak
0 
.wrappable { 
      overflow: hidden; 
      max-width: 400px; 
      word-wrap: break-word; 
}

İkili verilerle test ettim ve burada mükemmel çalışıyor.

— Jaip
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.