Zawijanie wyrazów w tabeli HTML

Używałem word-wrap: break-worddo zawijania tekstu divsi spansi. Jednak wydaje się, że nie działa w komórkach tabeli. Mam tabelę ustawioną na width:100%jeden wiersz i dwie kolumny. Tekst w kolumnach, choć stylizowany powyższym word-wrap, nie jest zawijany. Powoduje, że tekst przekracza granice komórki. Dzieje się tak w przeglądarce Firefox, Google Chrome i Internet Explorer.

Oto jak wygląda źródło:

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>

Długie słowo powyżej jest większe niż granice mojej strony, ale nie łamie się z powyższym HTML. Wypróbowałem poniższe sugestie dotyczące dodawania text-wrap:suppressi text-wrap:normal, ale żadne nie pomogło.

Poniższe działa dla mnie w Internet Explorerze. Zwróć uwagę na dodanie table-layout:fixedatrybutu CSS

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>

lub

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

Długie ujęcie, ale sprawdź dwukrotnie za pomocą Firebug (lub podobnego), czy przypadkowo nie dziedziczysz następującej zasady:

white-space:nowrap;

Może to zastąpić określone zachowanie związane z łamaniem linii.

Okazuje się, że nie ma na to dobrego sposobu. Najbliższe, jakie przyszedłem, to dodanie „przepełnienie: ukryte”; do diva wokół stołu i utraty tekstu. Wydaje się jednak, że prawdziwym rozwiązaniem jest porzucenie stołu. Używając div i względnego pozycjonowania byłem w stanie osiągnąć ten sam efekt, pomniejszony o dziedzictwo<table>

AKTUALIZACJA 2015: To jest dla tych jak ja, którzy chcą tej odpowiedzi. Po 6 latach działa to dzięki wszystkim uczestnikom.

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

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

Jak wspomniano, umieszczenie tekstu w divprawie działa. Po prostu trzeba określić widthz div, który ma szczęście do układów, które są statyczne.

Działa na FF 3.6, IE 8, Chrome.

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

Obejście, które wykorzystuje przepełnienie i działa dobrze przy normalnym układzie stołu + szerokość stołu 100%

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

Korzyści:

• Używa overflow-wrap:break-wordzamiast word-break:break-all. Co jest lepsze, ponieważ najpierw próbuje złamać spacje i odcina słowo tylko wtedy, gdy słowo jest większe niż jego kontener.
• Nie table-layout:fixedpotrzebne Użyj zwykłego automatycznego dostosowywania rozmiaru.
• Nie jest potrzebny do zdefiniowania stałej widthlub stałej max-widthw pikselach. %W razie potrzeby określ rodzica.

Testowane w FF57, Chrome62, IE11, Safari11

Zmień swój kod

word-wrap: break-word;

do

word-break:break-all;

Przykład

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

Problem z

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

jest to, że nie będzie działać tak dobrze, gdy w tekście jest trochę spacji, np

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

Jeśli słowo andthenlongerwithoutspacesmieści się w komórce tabeli w jednym wierszu, ale long text with andthenlongerwithoutspacesnie, długie słowo zostanie podzielone na dwie części, a nie zawinięte.

Alternatywne rozwiązanie: wstaw U + 200B ( ZWSP ), U + 00AD ( miękki łącznik ) lub U + 200C ( ZWNJ ) w każdym długim słowie po każdym, powiedzmy, 20-tym znaku (patrz jednak ostrzeżenie poniżej):

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>

Ostrzeżenie : wstawienie dodatkowych znaków o zerowej długości nie wpływa na odczyt. Wpływa to jednak na tekst kopiowany do schowka (te znaki są oczywiście również kopiowane). Jeśli tekst ze schowka zostanie później użyty w funkcji wyszukiwania w aplikacji internetowej ... wyszukiwanie zostanie przerwane. Chociaż to rozwiązanie można zobaczyć w niektórych dobrze znanych aplikacjach internetowych, należy unikać, jeśli to możliwe.

Ostrzeżenie : podczas wstawiania dodatkowych znaków nie należy rozdzielać wielu punktów kodowych w obrębie wykresu. Aby uzyskać więcej informacji, zobacz https://unicode.org/reports/tr29/#Grapheme_Cluster_Boundaries .

Sprawdź to demo

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

Oto link do przeczytania

Testowane w IE 8 i Chrome 13.

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

Powoduje to, że tabela dopasowuje się do szerokości strony, a każda kolumna zajmuje 50% szerokości.

Jeśli wolisz, aby pierwsza kolumna zajmowała więcej strony, dodaj width: 80%do niej, tdjak w poniższym przykładzie, zastępując 80% wybranym procentem.

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

Jedyne, co należy zrobić, to dodać szerokość do środka <td>lub do <div>środka, w <td>zależności od układu, który chcesz osiągnąć.

na przykład:

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

lub

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

Odpowiedź, która wygrała nagrodę jest prawidłowa, ale nie działa, jeśli pierwszy wiersz tabeli ma scaloną / połączoną komórkę (wszystkie komórki mają równą szerokość).

W takim przypadku należy użyć tagów colgroupi col, aby wyświetlić go poprawnie:

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

Wygląda na to, że musisz ustawić word-wrap:break-word;element bloku ( div) o określonej (nie względnej) szerokości. Dawny:

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

lub word-break:break-allza pomocą sugestii Abhisheka Simona.

To działa dla mnie:

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

A atrybut tabeli to:

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

</style>

Jeśli nie potrzebujesz obramowania tabeli, zastosuj to:

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

Znalazłem rozwiązanie, które wydaje się działać w Firefox, Google Chrome i Internet Explorer 7-9. Do tworzenia dwu kolumnowego układu tabeli z długim tekstem po jednej stronie. Wszędzie szukałem podobnego problemu, a to, co działało w jednej przeglądarce, zepsuło drugą, lub dodanie większej liczby tagów do tabeli wydaje się być złym kodowaniem.

NIE użyłem do tego tabeli. DL DT DD na ratunek. Przynajmniej do ustalenia układu dwukolumnowego, który jest w zasadzie zestawem glosariusza / słownika / słowa.

I trochę ogólnej stylizacji.

    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>

Korzystając z zawijanego zawijania słów i marginesu po lewej, mam dokładnie to, czego potrzebowałem. Pomyślałem, że podzielę się tym z innymi, być może pomoże to komuś innemu z dwukolumnowym układem stylu definicji, z problemami z zawijaniem słów.

Próbowałem użyć zawijania słów w komórce tabeli, ale działało to tylko w Internet Explorerze 9 (i oczywiście Firefox i Google Chrome), głównie próbując naprawić zepsutą przeglądarkę Internet Explorer tutaj.

Tabele są domyślnie zawijane, więc upewnij się, że wyświetlane są komórki tabeli table-cell:

td {
   display: table-cell;
}

style = "układ tabeli: stały; szerokość: 98%; zawijanie słów: słowo-łamanie"

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

To zadziałało dla mnie świetnie. Miałem długie linki, które spowodowałyby, że tabela przekroczyłaby 100% w przeglądarkach internetowych. Testowane na IE, Chrome, Android i Safari.

Rozwiązaniem współpracującym z Google Chrome i Firefox (nie testowane z Internet Explorerem) jest ustawienie display: table-celljako element blokowy.

Możesz spróbować, jeśli Ci odpowiada ...

Umieść obszar tekstowy w swoim td i wyłącz go kolorem tła białym i określ liczbę wierszy.

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