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.
html
css
html-table
word-wrap
zool
źródło
źródło
Odpowiedzi:
Aby zawinąć tekst TD
Pierwszy zestaw stylów stołu
następnie ustaw styl TD
źródło
white-space: normal
w stylu td, żeby owijanie działało (zamiastword-wrap:break-word
)white-space:normal;
white-space: pre-wrap
jeśli chcesz zachować odstępy.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ć.
źródło
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.
2.) Możesz spróbować umieścić swój tekst w zawijanym elemencie (np. Rozpiętości) i ustawić na nim ograniczenia.
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 .
źródło
table-layout:fixed
rozwiąż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
źródło
Kredyty dla http://www.blakems.com/archives/000077.html
źródło
To zadziałało dla mnie z niektórymi frameworkami css (Material Design Lite [MDL]).
źródło
używać
word-break
może być używany bez stylizacjitable
dotable-layout: fixed
źródło
To działa naprawdę dobrze:
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.
źródło
Miałem kilka swoich
td
z:To rozwiązało to dla mnie:
źródło
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
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/
źródło
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.
Uzasadnieniem dla tego
span
jest 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: hidden
ma, ale może nie, ukryć to, co powoduje, że inaczej<td>
się rozwijać.Zalecałbym użycie
title
wł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.
źródło
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”.
źródło
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.
źródło
źródło