Zawijaj tekst w znacznik <td>

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.

Aby zawinąć tekst TD

Pierwszy zestaw stylów stołu

table{
    table-layout: fixed;
}

następnie ustaw styl TD

td{
    word-wrap:break-word
}

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

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 .

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>

.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

Kredyty dla http://www.blakems.com/archives/000077.html

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

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>

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.

Miałem kilka swoich tdz:

white-space: pre;

To rozwiązało to dla mnie:

white-space: pre-wrap;

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/

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.

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

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>

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