HTML tablosunda sözcük kaydırma

word-wrap: break-wordMetinleri divs ve spans'ye kaydırmak için kullanıyorum . Ancak, tablo hücrelerinde çalışmıyor gibi görünüyor. width:100%Bir satır ve iki sütun ile ayarlanmış bir tablo var . Sütunlardaki metin, yukarıdakilerle stilize edilmiş olmasına rağmen kaydırılmaz word-wrap. Metnin hücrenin sınırlarını aşmasına neden olur. Bu Firefox, Google Chrome ve Internet Explorer'da olur.

Kaynak şöyle görünür:

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Yukarıdaki uzun kelime, sayfamın sınırlarından daha büyük, ancak yukarıdaki HTML ile kesilmiyor. Aşağıdaki önerileri ekleyerek denedim text-wrap:suppressve text-wrap:normalikisi de yardımcı olmadı.

Internet Explorer'da aşağıdakiler benim için çalışıyor. table-layout:fixedCSS özelliğinin eklendiğine dikkat edin

td {
  border: 1px solid;
}

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

<td style="word-break:break-all;">longtextwithoutspace</td>

veya

<span style="word-break:break-all;">longtextwithoutspace</span>

Uzun bir atış, ancak Firebug (veya benzeri) ile yanlışlıkla aşağıdaki kuralı devralmadığınızı kontrol edin:

white-space:nowrap;

Bu, belirttiğiniz satır sonu davranışınızı geçersiz kılabilir .

Bunu yapmanın iyi bir yolu olmadığı anlaşılıyor. En yakın geldiğim "taşma: gizli;" masa etrafında div ve metin kaybetme. Gerçek çözüm olsa masa hendek gibi görünüyor. Div'leri ve göreli konumlandırmayı kullanarak aynı etkiyi elde edebildim,<table>

2015 GÜNCELLEME: Bu benim gibi bu cevabı isteyen kişiler içindir. 6 yıl sonra, tüm katkıda bulunanlar sayesinde bu işe yarıyor.

* { // this works for all but td
  word-wrap:break-word;
}

table { // this somehow makes it work for td
  table-layout:fixed;
  width:100%;
}

Belirtildiği gibi, metni divneredeyse işe koyuyor . Sadece belirtmek zorunda widtharasında divstatiktir düzenleri için şanslı olan.

Bu, FF 3.6, IE 8, Chrome'da çalışır.

<td>
  <div style="width: 442px; word-wrap: break-word">
    <!-- Long Content Here-->
  </div>
</td>

Taşma sargısı kullanan ve normal tablo düzeni + tablo genişliği% 100 ile iyi çalışan geçici çözüm

https://jsfiddle.net/krf0v6pw/

HTML

<table>
  <tr>
    <td class="overflow-wrap-hack">
      <div class="content">
        wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
      </div>
    </td>
  </tr>
</table>

CSS

.content{
  word-wrap:break-word; /*old browsers*/
  overflow-wrap:break-word;
}

table{
  width:100%; /*must be set (to any value)*/
}

.overflow-wrap-hack{
  max-width:1px;
}

Yararları:

• Kullanımları overflow-wrap:break-wordyerine word-break:break-all. Bu daha iyidir çünkü önce boşlukları kırmaya çalışır ve sözcüğü sadece kaptan daha büyükse keser.
• Gerek yok table-layout:fixed. Normal otomatik boyutlandırmanızı kullanın.
• Sabit widthveya max-widthpiksel cinsinden sabit tanımlamak için gerekli değildir . %Gerekirse ebeveyni tanımlayın .

FF57, Chrome62, IE11, Safari11'de test edildi

Kodunuzu değiştirin

word-wrap: break-word;

için

word-break:break-all;

Misal

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-break:break-all;">longtextwithoutspacelongtextwithoutspace Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content, Long Content</div>
    </td>
    <td><span style="display: inline;">Short Content</span>
    </td>
  </tr>
</table>

İle ilgili sorun

<td style="word-break:break-all;">longtextwithoutspace</td>

o iyiliği öyle değil çalışacaktır olmasıdır metin zaman vardır bazı boşluklar, örneğin

<td style="word-break:break-all;">long text with andthenlongerwithoutspaces</td>

Sözcük andthenlongerwithoutspacestek bir satırda tablo hücresine sığarsa, long text with andthenlongerwithoutspacesuymazsa, uzun sözcük sarılmak yerine ikiye bölünür.

Alternatif çözüm: U + 200B ( ZWSP ), U + 00AD ( yumuşak kısa çizgi ) veya U + 200C ( ZWNJ ), her 20 karakterden sonra her uzun kelimeye ekleyin (ancak aşağıdaki uyarıya bakın):

td {
  border: 1px solid;
}

<table style="width: 100%;">
  <tr>
    <td>
      <div style="word-wrap: break-word;">
        Looooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooooooooo&#xAD;oooooooooooooong word
      </div>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>

Uyarı : sıfır uzunluklu ek karakterler eklemek okumayı etkilemez. Bununla birlikte, panoya kopyalanan metni etkiler (bu karakterler elbette kopyalanır). Pano metni daha sonra web uygulamasındaki bazı arama işlevlerinde kullanılırsa ... arama kesilir. Bu çözüm iyi bilinen bazı web uygulamalarında görülebilse de, mümkünse kaçının.

Uyarı : Ek karakterler eklerken, grafik içinde birden çok kod noktasını ayırmamalısınız. Daha fazla bilgi için bkz. Https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries .

Bu demoya göz atın

   <table style="width: 100%;">
    <tr>
        <td><div style="word-break:break-all;">LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord</div>
        </td>
        <td>
            <span style="display: inline;">Foo</span>
        </td>
    </tr>
</table>

İşte okumak için bağlantı

IE 8 ve Chrome 13'te test edilmiştir.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td>
              <div style="word-wrap: break-word;">
                 longtexthere
              </div>
        </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Bu, tablonun sayfanın genişliğine sığmasına ve her sütunun genişliğin% 50'sini almasına neden olur.

Sayfanın daha yukarı çekmek için ilk sütunu tercih ediyorsanız, bir ekleme width: 80%için tdseçtiğiniz yüzdesi ile% 80 yerine, aşağıdaki örnekte olduğu gibi.

<table style="table-layout: fixed; width: 100%">
    <tr>
        <td style="width:80%">
               <div style="word-wrap: break-word;">
                 longtexthere
               </div>
            </td>
        <td><span style="display: inline;">Foo</span></td>
    </tr>
</table>

Yapılması gereken tek şey, elde etmek istediğiniz düzene bağlı olarak <td>veya <div>içine genişlik eklemektir <td>.

Örneğin:

<table style="width: 100%;" border="1"><tr>
<td><div style="word-wrap: break-word; width: 100px;">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
<td><span style="display: inline;">Foo</span></td>
</tr></table>

veya

 <table style="width: 100%;" border="1"><tr>
    <td width="100" ><div style="word-wrap: break-word; ">looooooooooodasdsdaasdasdasddddddddddddddddddddddddddddddasdasdasdsadng word</div></td>
    <td><span style="display: inline;">Foo</span></td>

</tr></table>

Ödül kazanan cevap doğrudur, ancak tablonun ilk satırında birleştirilmiş / birleştirilmiş hücre varsa (tüm hücreler eşit genişliğe sahipse) işe yaramaz .

Bu durumda, colgroupve coletiketlerini düzgün görüntülemek için kullanmalısınız :

<table style="table-layout: fixed; width: 200px">
<colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
</colgroup>
<tr>
    <td colspan="2">Merged cell</td>
</tr>
<tr>
    <td style="word-wrap: break-word">VeryLongWordInThisCell</td>
    <td style="word-wrap: break-word">Cell 2</td>
</tr>
</table>

<p style="overflow:hidden; width:200px; word-wrap:break-word;">longtexthere<p>

Belirtilen (göreceli olmayan) genişliğe sahip word-wrap:break-word;bir blok öğesi ( div) ayarlamanız gerekir . Ör:

<table style="width: 100%;"><tr>
    <td><div style="display:block; word-wrap: break-word; width: 40em;">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word</div></td>
    <td><span style="display: inline;">Foo</span></td>
</tr></table>

veya word-break:break-allAbhishek Simon'un önerisine göre.

Bu 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%
   }

</style>

Tablo kenarlığına ihtiyacınız yoksa bunu uygulayın:

table{
    table-layout:fixed;
    border-collapse:collapse;
}
td{
    word-wrap: break-word;
}

Firefox, Google Chrome ve Internet Explorer 7-9'da işe yarayan bir çözüm buldum. Bir tarafında uzun metin bulunan iki sütunlu bir tablo düzeni yapmak için. Benzer bir sorun için her yerde aradım ve bir tarayıcıda işe yarayan diğerini kırdı veya bir tabloya daha fazla etiket eklemek kötü kodlama gibi görünüyor.

Bunun için bir tablo kullanmadım. DL DT DD kurtarmaya. En azından iki sütunlu bir düzeni düzeltmek için, bu temelde bir sözlük / sözlük / kelime anlamı düzeneğidir.

Ve bazı genel tasarım.

    dl {
        margin-bottom:50px;
    }

    dl dt {
        background:#ccc;
        color:#fff;
        float:left;
        font-weight:bold;
        margin-right:10px;
        padding:5px;
        width:100px;
    }

    dl dd {
        margin:2px 0;
        padding:5px 0;
        word-wrap:break-word;
        margin-left:120px;
    }

<dl>
    <dt>test1</dt>
    <dd>Fusce ultricies mi nec orci tempor sit amet</dd>
    <dt>test2</dt>
    <dd>Fusce ultricies</dd>
    <dt>longest</dt>
    <dd>
        Loremipsumdolorsitametconsecteturadipingemipsumdolorsitametconsecteturaelit.Nulla
        laoreet ante et turpis vulputate condimentum. In in elit nisl. Fusce ultricies
        mi nec orci tempor sit amet luctus dui convallis. Fusce viverra rutrum ipsum,
        in sagittis eros elementum eget. Class aptent taciti sociosqu ad litora
        torquent per conubia nostra, per.
    </dd>
</dl>

Kayan word-wrap ve kenar boşluğu kullanarak, tam olarak ihtiyacım olanı aldım. Bunu başkalarıyla paylaşacağımı düşündüm, belki iki kelimeyi tanımlamak için başkalarına yardımcı olacak ve sözcükleri sarmak için sorun yaşayacaktır.

Tablo hücresinde sözcük kaydırmayı kullanmayı denedim, ancak yalnızca Internet Explorer 9'da (ve tabii ki Firefox ve Google Chrome'da) çalıştı.

Tablolar varsayılan olarak sarılır, bu nedenle tablo hücrelerinin görüntüsünün olduğundan emin olun table-cell:

td {
   display: table-cell;
}

style = "tablo düzeni: sabit; genişlik:% 98; sözcük kaydırma: kesme sözcüğü"

<table bgcolor="white" id="dis" style="table-layout:fixed; width:98%; word-wrap:break-word" border="0" cellpadding="5" cellspacing="0" bordercolordark="white" bordercolorlight="white" >

Demo - http://jsfiddle.net/Ne4BR/749/

Bu benim için harika çalıştı. Tablonun web tarayıcılarında% 100'ü aşmasına neden olacak uzun bağlantılar vardı. IE, Chrome, Android ve Safari'de test edildi.

Google Chrome ve Firefox ile çalışan bir çözüm (Internet Explorer ile test edilmemiştir) display: table-cellbir blok öğesi olarak ayarlamaktır .

Size uygunsa bunu deneyebilirsiniz ...

TD'nize bir metin alanı koyun ve arka plan rengi beyaz ile devre dışı bırakın ve satır sayısını tanımlayın.

<table style="width: 100%;">
  <tr>
    <td>
        <textarea rows="4" style="background-color:white;border: none;" disabled>      Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word
      </textarea>
    </td>
    <td><span style="display: inline;">Short word</span></td>
  </tr>
</table>