Zawijanie wyrazów w tabeli HTML


566

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.


dodaj łącznik. <tr> <td style = "wrap-text: normal; wrap-word: break-word"> To jest wstępne przesłanie. </td> </tr>
adatapost

Niestety tekst tam pochodzi z treści generowanych przez użytkowników. Oczywiście mogłem go wstępnie przetworzyć i dodać łącznik, ale miałem nadzieję, że będzie lepszy sposób.
psychotik

Przepraszam za użycie słowa „hard-łącznik”. W HTML zwykły łącznik jest reprezentowany przez znak „-” (& # 45; lub & # x2D;). Miękki łącznik jest reprezentowany przez odniesienie do postaci znaku & nieśmiały; (& # 173; or & # xAD;)
adatapost

Czy naprawdę używasz <code>break-wor<em>k</em> </code>? Może to może mieć z tym coś wspólnego.
Ms2ger,

1
Jeśli jesteś tutaj, możesz również zajrzeć na white-space: pre-wrap developer.mozilla.org/en-US/docs/Web/CSS/white-space
Tom Prats

Odpowiedzi:


624

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>


@ewomac tak, czasami muszę po prostu zignorować błędy VS2010 dotyczące HTML / CSS, jeśli wiem, że zadziała w przeglądarce.
Marc Stober,

2
@marc !! koleś, wielkie dzięki za to. Zadanie polegało mi na zbudowaniu mobilnej wersji witryny klienta korzystającej z tabel i miałem problem z uruchomieniem tego! układ tabeli: naprawiono trick!
debuguj

17
To sprawia, że ​​inne kolumny są o wiele za szerokie.
Clément,

2
Pamiętaj, aby przeczytać developer.mozilla.org/en-US/docs/Web/CSS/table-layout Szerokość tabeli i kolumny są ustalane na podstawie szerokości elementów tabeli i col lub szerokości pierwszego wiersza komórek. Komórki w kolejnych wierszach nie wpływają na szerokości kolumn. Wygląda na to, że jest to również dobre dla wydajności.
Sam Barnum,

2
@ Clément patrz poniżej odpowiedź Indreka na temat <colgroup>, naprawiło to dla mnie.
andrewtweber

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

lub

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

Potwierdza, że ​​podejście Pratika działa również w Safari na iOS (iPhone).
Occulus

Aby obejść problem z krótkimi i długimi słowami, możesz potencjalnie wstępnie przetworzyć tekst i zawinąć tylko długie słowa (powiedzmy,> 40 znaków) w <span>.
nornagon,

9
tego nie obsługuje firefox, opera
meotimdihia

5
to nie preferencyjnie nie dzieliło się na znaki niebędące wyrazami (np. gdybym miał serię krótszych słów oddzielonych spacjami, zawsze poprowadziłby te słowa aż do linii, a następnie podzieliłby ostatnie słowo na pół). Word-wrapłamie słowa tylko w razie potrzeby
Hashbrown,

To podejście jest lepsze, ponieważ nie wymaga table-layout: fixed;.
Finezja

125

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.


To właśnie odziedziczyłem i złamałem dla mnie owijanie słów
shane lee

@RickGrundy Na co zmienisz ten problem, jeśli masz ten problem?
Cokedude

7
@cokedude Jestem tu o wiele za późno, ale towhite-space:normal;
Beer Me

46

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

29

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>

2
Możesz dodać min-width: 100%wraz z, widthaby upewnić się, że divzajmuje całą komórkę.
user1091949

Chcę zawijać słowa przecinkiem (,). Jak Long,Long,Long,Long,Long. Chcę to zawinąć po każdym przecinku (,).
Karthikeyan

20

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


Podczas gdy ten hack faktycznie działa we wszystkich przeglądarkach, uważaj, że specyfikacja CSS nie daje na to żadnej gwarancji. Na w3.org/TR/CSS21/visudet.html#propdef-max-width , „efekt«min szerokości»a«max szerokości»w tabelach, stoły inline komórek tabeli, kolumny tabel i grup kolumna jest niezdefiniowany ” .
Mark Amery

17

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>


-1; powoduje to, że przeglądarka całkowicie ignoruje podział wyrazów i przerywa je w środku, nawet jeśli nie jest to konieczne. Jest to rzadko pożądane zachowanie i przypuszczalnie nie takie zachowanie, jakiego OP chciał, bo inaczej nie zastosowaliby go break-wordw pierwszej kolejności.
Mark Amery

16

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 .


Być może wynik jest nieco lepszy, jeśli wstawiając wystarczająco długi wyraz , wstawisz miękki łącznik po każdym znaku, aby przeglądarka mogła niezawodnie złamać słowo na prawej krawędzi elementu zawierającego.
Mark Amery

Chociaż jest to realne rozwiązanie, pozornie nieszkodliwa sugestia dodawania czegoś „po każdym, powiedzmy, 20-tym znaku” jest pełna pułapek, jeśli chcesz to zrobić programowo na serwerze. Iterowanie po znakach ciągu Unicode jest trudne w większości języków programowania. W najlepszym razie język może ułatwić iterację punktów kodowych Unicode, ale niekoniecznie są to, co chcielibyśmy nazwać „znakami” (np. Mogą być zapisane jako dwa punkty kodowe). Prawdopodobnie naprawdę mamy na myśli „grafemy”, ale nie znam żadnego języka, który sprawia, że ​​omijanie ich jest trywialne.
Mark Amery

1
@ MarkAmery masz rację. Jednak nawet przy zwykłym ASCII nie jest to świetne. Dodałem „ostrzeżenia”.
Piotr Findeisen

14

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


-1; użycie break-allspowoduje, że przeglądarka całkowicie zignoruje podziały wyrazów przy podejmowaniu decyzji, gdzie wstawiać podziały wiersza, z efektem, że nawet jeśli komórka zawiera normalną prozę bez żadnych bardzo długich słów, skończy się to podziałem wiersza w środku słów. Jest to zazwyczaj niepożądane.
Mark Amery

10

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>

10

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>

1
Zasadniczo po prostu powtarza to, co odpowiedź loungerdork powiedziała już kilka miesięcy wcześniej, bez dodawania żadnych nowych informacji ani wglądu.
Mark Amery

To zadziałało dla mnie
core114

8

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>

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

1
-1 zarówno za brak jakiegokolwiek wyjaśnienia, jak i złe rozwiązanie. Umieszczenie zawartości w stałej szerokości pikseli pw komórce tabeli, która nie ma stałej szerokości, prawie na pewno zakończy się pprzepełnieniem lub brakiem wypełnienia komórki tabeli.
Mark Amery

8

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.


5

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>

Podobnie jak kilka innych odpowiedzi, kluczem tutaj, który sprawia, że ​​działa table-layout: fixed, jest już dużo starsza odpowiedź sugerująca to, więc ta odpowiedź nie dodaje żadnych nowych informacji.
Mark Amery


4

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.


2

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

td {
   display: table-cell;
}

-1; tekst w dowolnym elemencie HTML jest domyślnie zawijany, nie tylko tabele. Sugestia tutaj nie ma żadnego sensu.
Mark Amery

1

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.


Jest to w zasadzie duplikat jako najczęściej głosowana odpowiedź ; w obu przypadkach rozwiązanie sprowadza się do „użycia table-layout: fixed”.
Mark Amery

0

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


0

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>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.