Zawijaj tekst w znacznik <td>


136

Chcę zawinąć tekst, który jest dodawany do <td>elementu. Próbowałem z style="word-wrap: break-word;" width="15%". Ale to nie jest zawijanie tekstu. Czy nadanie mu 100% szerokości jest obowiązkowe? Mam inne kontrolki do wyświetlenia, więc dostępne jest tylko 15% szerokości.


1
Jakiego HTML używasz? czy to jest <td> jakiś tekst ... </td> czy twój TD zawiera <p> lub <span>? Również kiedy mówisz, że to nie jest zawijanie, przypuszczam, że widzisz rozszerzający się tekst TD, gdy tekst jest dłuższy niż „15%” szerokości tabeli?
scunliffe

Mój HTML ma <td> dynamiczny tekst .. </td> i to, co przypuszczasz o rozszerzaniu TD, jest całkowicie poprawne.

Odpowiedzi:


221

Aby zawinąć tekst TD

Pierwszy zestaw stylów stołu

table{
    table-layout: fixed;
}

następnie ustaw styl TD

td{
    word-wrap:break-word
}

5
Przypuszczam, że nie został zaakceptowany, ponieważ nie działa w przeglądarce Chrome ... :-( Jakieś rozwiązanie dla zestawu webkit?
MarcoS

4
U mnie działało idealnie w Chrome.
Alejandro Riedel

17
Ciekawe ... W Chrome musiałem użyć white-space: normalw stylu td, żeby owijanie działało (zamiast word-wrap:break-word)
Jim

3
Mogę potwierdzić, że miałem takie same doświadczenia z odpowiedzią Jima. Z jakiegoś powodu Chrome nie reaguje bezwhite-space:normal;
petrosmm

1
Użyj, white-space: pre-wrapjeśli chcesz zachować odstępy.
eicksl

47

Tabele HTML obsługują styl css „table-layout: fixed”, który uniemożliwia agentowi użytkownika dostosowanie szerokości kolumn do ich zawartości. Możesz go użyć.


7
Próbowałem tego rozwiązania, ale wygląda na to, że nie działa w przeglądarce Chrome. Mam tabelę, która jest dynamicznie wypełniana hiperłączem o szerokości ponad dwukrotnie większej niż szerokość komórki. „table-layout: fixed” rozwiązuje problem z rozciąganiem tabeli, ale nie zawija tekstu; zamiast tego nadal rozciąga się poza prawą część strony. Czy coś mi brakuje?
VOIDHand

30

Wydaje mi się, że napotkałeś haczyk 22 tabel. Tabele świetnie nadają się do pakowania treści w strukturę tabelaryczną i wykonują wspaniałą robotę „rozciągania”, aby zaspokoić potrzeby treści, które zawierają.

Domyślnie komórki tabeli rozciągną się, aby dopasować zawartość ... w ten sposób tekst po prostu go poszerzy.

Jest kilka rozwiązań.

1.) Możesz spróbować ustawić maksymalną szerokość w TD.

<td style="max-width:150px;">

2.) Możesz spróbować umieścić swój tekst w zawijanym elemencie (np. Rozpiętości) i ustawić na nim ograniczenia.

<td><span style="max-width:150px;">Hello World...</span></td>

Należy jednak pamiętać, że starsze wersje IE nie obsługują szerokości min / max.

Ponieważ IE nie obsługuje natywnie max-width, musisz dodać hack, jeśli chcesz go do tego zmusić. Istnieje kilka sposobów na dodanie hacka, to tylko jeden.

Podczas ładowania strony, tylko dla IE6, uzyskaj renderowaną szerokość tabeli (w pikselach), a następnie uzyskaj 15% tej wartości i zastosuj ją jako szerokość do pierwszego TD w tej kolumnie (lub TH, jeśli masz nagłówki) ponownie, w pikselach .


Mam na oba sposoby. Ale nie można zawinąć tekstu. Używam IE6.0

1
ah, IE6. To zwiększa złożoność. Poprawię swoją odpowiedź za pomocą hackowania IE6.
scunliffe

11

table-layout:fixedrozwiąże problem rozszerzającej się komórki, ale utworzy nową. IE domyślnie ukryje przepełnienie, ale Mozilla wyrenderuje go poza polem.

Innym rozwiązaniem byłoby użycie: overflow:hidden;width:?px

<table style="table-layout:fixed; width:100px">
 <tr>
   <td style="overflow:hidden; width:50px;">fearofthedarkihaveaconstantfearofadark</td>
   <td>
     test
   </td>
 </tr>
</table>


9

To zadziałało dla mnie z niektórymi frameworkami css (Material Design Lite [MDL]).

table {
  table-layout: fixed;
  white-space: normal!important;
}

td {
  word-wrap: break-word;
}

8

używać word-breakmoże być używany bez stylizacji tabledotable-layout: fixed

table {
  width: 140px;
  border: 1px solid #bbb
}

.tdbreak {
  word-break: break-all
}
<p>without word-break</p>
<table>
  <tr>
    <td>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>

<p>with word-break</p>
<table>
  <tr>
    <td class="tdbreak">LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOGGG</td>
  </tr>
</table>


3

To działa naprawdę dobrze:

<td><div style = "width:80px; word-wrap: break-word"> your text </div></td> 

Możesz użyć tej samej szerokości dla wszystkich plików <div lub dostosować szerokość w każdym przypadku, aby podzielić tekst w dowolnym miejscu.

W ten sposób nie musisz się wygłupiać ze stałymi szerokościami tabel czy złożonymi CSS.


1
Być może zamierzałeś zamiast tego użyć CSS, ale we współczesnym HTML generalnie unika się stylów wbudowanych, zwłaszcza jeśli w kółko powtarzasz te same style dla każdego skopiowanego elementu div.
TankorSmash

3

Miałem kilka swoich tdz:

white-space: pre;

To rozwiązało to dla mnie:

white-space: pre-wrap;

2

Aby szerokość komórki była dokładnie taka sama jak najdłuższego słowa w tekście, po prostu ustaw szerokość komórki na 1px

to znaczy

td {
  width: 1px;
}

To jest eksperymentalne i dowiedziałem się o tym podczas robienia prób i błędów

Skrzypce na żywo: http://jsfiddle.net/harshjv/5e2oLL8L/2/


1

Możliwe, że to zadziała, ale w pewnym momencie w przyszłości (jeśli nie od razu) może się to okazać trochę uciążliwe.

<style> 
tbody td span {display: inline-block;
               width: 10em; /* this is the nuisance part, as you'll have to define a particular width, and I assume -without testing- that any percent widths would be relative to the containing `<td>`, not the `<tr>` or `<table>` */
               overflow: hidden; 
               white-space: nowrap; }

</style>

...

<table>

<thead>...</thead>
<tfoot>...</tfoot>

<tbody>

<tr>

<td><span title="some text">some text</span></td> <td><span title="some more text">some more text</span></td> <td><span title="yet more text">yet more text</span></td>

</tr>

</tbody>

</table>

Uzasadnieniem dla tego spanjest to, że, jak wskazali inni, a <td>będzie zazwyczaj rozszerzać się, aby pomieścić zawartość, podczas gdy a <span>można podać - i oczekuje się, że utrzyma - ustaloną szerokość; overflow: hiddenma, ale może nie, ukryć to, co powoduje, że inaczej <td>się rozwijać.

Zalecałbym użycie titlewłaściwości zakresu, aby pokazać tekst, który jest obecny (lub obcięty) w komórce wizualnej, tak aby tekst był nadal dostępny (a jeśli nie chcesz / nie potrzebujesz, aby ludzie go widzieli, to po co go mieć w pierwszej kolejności, jak sądzę ...).

Ponadto, jeśli zdefiniujesz szerokość dla td {...}td, rozszerzy się (lub potencjalnie skurczy, ale wątpię), aby wypełnić jego domyślną szerokość (jak widzę, wydaje się, że jest totable-width/number-of-cells ), określona szerokość tabeli nie wydaje się tworzyć ten sam problem.

Wadą jest dodatkowy znacznik używany do prezentacji.


1

W rzeczywistości zawijanie tekstu odbywa się automatycznie w tabelach. Błędem popełnianym przez ludzi podczas testowania jest hipotetyczne założenie długiego ciągu znaków, takiego jak „gggggggggggggggggggggggggggggggggggggggggggg” i narzekanie, że się nie zawija. Praktycznie nie ma słowa w języku angielskim, które byłoby tak długie, a nawet jeśli istnieje, istnieje niewielka szansa, że ​​zostanie w nim użyte<td> .

Spróbuj przeprowadzić testy ze zdaniami typu „Przeciwstawianie się jest przesądne w określonych z góry okolicznościach”.


To jest poprawne. Nie mogę zrozumieć, dlaczego ludzie sugerują użycie „white-space: nowrap”, ponieważ zrobi to dokładnie odwrotnie niż chce PO.
mluisbrown

29
poprawne żadne słowo w języku angielskim, które jest tak długie, ale przypuśćmy, że wyświetlam ścieżkę pliku, która będzie ciągła i bardzo długa.
krisp

2
.. Lub na przykład długa lista liczb oddzielonych przecinkami, które niestety nie mają spacji.
Aditya Sanghi

4
.. Lub długa nazwa domeny, która może
zawierać

Próbuję rozwiązać ten problem, gdy „słowo” to bardzo długi adres URL. Powyższy komentarz z przykładem „gggggggggggggggggggggggggggggggggggggggggggg” nie uwzględnia długich adresów URL.
geekandglitter

0

Zastosuj klasy do swoich TD, zastosuj odpowiednie szerokości (pamiętaj, aby zostawić jedną z nich bez szerokości, aby przyjęła pozostałą szerokość), a następnie zastosuj odpowiednie style. Skopiuj i wklej poniższy kod do edytora i wyświetl w przeglądarce, aby zobaczyć, jak działa.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
td { vertical-align: top; }
.leftcolumn { background: #CCC; width: 20%; padding: 10px; }
.centercolumn { background: #999; padding: 10px; width: 15%; }
.rightcolumn { background: #666; padding: 10px; }
-->
</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftcolumn">This is the left column. It is set to 20% width.</td>
    <td class="centercolumn">
        <p>Hi,</p>
        <p>I want to wrap a text that is added to the TD. I have tried with style="word-wrap: break-word;" width="15%". But the wrap is not happening. Is it mandatory to give 100% width ? But I have got other controls to display so only 15% width available.</p>
        <p>Need help.</p>
        <p>TIA.</p>
    </td>
    <td class="rightcolumn">This is the right column, it has no width so it assumes the remainder from the 15% and 20% assumed by the others. By default, if a width is applied and no white-space declarations are made, your text will automatically wrap.</td>
  </tr>
</table>
</body>
</html>

Uważam, że OP, choć nie stwierdza tego wprost, ma problemy z zawijaniem dynamicznej zawartości innej niż spacje. W takim przypadku powyższe rozwiązanie nie zadziała - jsfiddle.net/qZrFW
user66001

-1
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Poem</th>
    <th>Poem</th>
  </tr>
  <tr>
    <td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
    <td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
  </tr>
</table>

<p>The nowrap attribute is not supported in HTML5. Use CSS instead.</p>

</body>
</html>
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.