2010-04-17 17 views
42

Mam tabeli html i jedna kolumna (lub <td>) zawiera bardzo długie wyrazy. Chcę ustawić maksymalną szerokość kolumny, tak aby tekst był dłuższy niż maksymalna szerokość tekstu powinien automatycznie owijać do następnej linii. Próbowałem ustawić styl css max-width na odpowiednim elemencie <td> z "max-width:100px", ale to nie działa. Tekst jest nadal bardzo długi i nie powoduje automatycznego zawijania do następnej linii.Dlaczego moja tabela html "max-width" nie powoduje zawijania tekstu?

Jakieś pomysły, co jest nie tak, lub jakikolwiek kod referencyjny rozwiązania? Używam IE 8 na Windows 7.

+9

Jak określono w specyfikacji [css 2.1] (http://www.w3.org/TR/CSS2/visudet.html#min-max-widths): "W CSS 2.1 efekt" min-width "i" max-width "w tabelach, tabelach śródliniowych, komórkach tabel, kolumnach tabeli i grupach kolumn jest niezdefiniowany." –

Odpowiedz

39

Musisz dodać właściwość CSS3 word-wrap: break-word;.

+1

wraz z maksymalną szerokością? – George2

+2

@ George2 Ta właściwość css ma na celu umożliwienie złamania długiego słowa. Jeśli to rozwiąże problem, wygląda na to, że w pytaniu brakowało punktu: tekst jest nie tylko długi, ale zawiera również bardzo długie słowa. –

+0

Skopiowałem pytanie, aby było jasne, że tekst zawiera długie słowa, a nie tylko długi tekst. – culix

2

Stara szerokość taga html będzie działać w IE 8 dla tego ... Ale chcesz maksymalną szerokość, a nie szerokość ... oprócz dodatkowego atrybutu html potrzebnego dla każdej komórki.

+0

"Ale potrzebujesz maksymalnej szerokości, a nie szerokości" - to, czego potrzebuję, jest proste, po prostu ustaw długi tekst automatycznie zawijany do następnej linii, podobnie jak funkcja automatycznego zwijania notatnika. Jakieś rozwiązania? – George2

+0

Tak, a rozwiązanie podane przez kogoś powyżej zrobi. (Muszę sprawdzić na IE8, jak sądzę, jest twój cel) Oczywiście, css3 nie będzie obowiązywać w IE6, na pewno. Moje rozwiązanie działa, ale nie jest elastyczne, potrzebujesz stałej szerokości na tds i prawdopodobnie również na stole. Co nie jest zabawne. słowo-przerwa, o którym wspomniał, jest jedynym sposobem, jeśli próbujesz złamać słowa, starsze właściwości css nie będą się łamać na przykład długich ciągów kluczy rejestru bez spacji. W każdym razie starsze css do owijania: http://www.w3schools.com/css/pr_text_white-space.asp http://www.quirksmode.org/css/whitespace.html (tabela obsługi przeglądarek) –

+0

Innym rozwiązaniem, które czasami używam, jest osadzenie wewnątrz div lub span (z display: block lub nie, w zależności od tego, co jest potrzebne), do którego stosuję dowolne właściwości ... może to być sztuczka, w niektórych przypadkach. –

7

Możesz umieścić div wewnątrz komórek tabeli.

Nic w tym dziale nie rozciągnie komórki tabeli.

Działa wspaniale w IE8 i Chrome przynajmniej.

+1

W przypadku długich słów, dodawanie zawijania wyrazów: słowo-przerywane; będzie wymagane. W przypadku tabel o ustalonej szerokości wewnętrzna zawartość komórki może być szersza niż maksymalna szerokość określona w elem div, ale tekst zostanie zawinięty zgodnie z szerokością div, co spowoduje utratę miejsca. Twoje rozwiązanie jest więc ograniczone do tabel o stałych szerokościach. –

1
<td nowrap="wrap" style="width:100px;"></td> 

Wszystkie przeglądarki ..

Niestety trzeba obsłużyć każdy komórek treści do utrzymania całej tabeli stałej szerokości. Istnieje atrybut szerokości, ale nie ma on nic wspólnego.

Powiązane problemy