Zapobieganie tekstowi z tabeli zachodzenia na siebie szerokości td

Question

Jak ograniczyć wpis w tabeli <td> do rozwinięcia na całym ekranie, gdy pozycja jest zbyt długa?

Answer 1

Cóż, w CSS jest max-width, max-height i overflow.

Więc

td.whatever 
{ 
    max-width: 150px; 
    max-height: 150px; 
    overflow: hidden; 
} 

ograniczy maksymalną szerokość i wysokość do 150 pikseli, a to może być cokolwiek, od mniej niż 150 do 150, a wszystko, co nie pasuje do wnętrza, które będą obcinane i ukryte z widoku.

Domyślne przepełnienie (overflow: visible;) polega na tym, aby po prostu pozwolić, aby wszystko, co nie mieści się w określonym pojemniku, wylało się poza jego obszar. Jeśli tylko chcesz ograniczyć ją poziomo i nie chce niczego ukrywać, word-wrap może pomóc:

td.whatever 
{ 
    max-width: 150px; 
    word-wrap: break-word; 
} 

word-wrap złamie słowa, gdy zajdzie potrzeba, nawet jeśli nie jest to na końcu wyrazu. Możesz także użyć opcji height i width, aby określić stały rozmiar, jeśli nie chcesz, aby tabela była w ogóle rozwijana lub zmniejszana.

Answer 2

Można użyć word-wrap:break-word;, więc zbyt długie słowa są zawijane.

Answer 3

td.whatever_class{ 
    max-width: 100px; 
} 

Zamień 100 pikseli tak, jak chcesz. 1000px to dobra szerokość dla stron internetowych, ponieważ zmieści się na prawie wszystkich monitorach, jakie dzisiaj mają ludzie, więc jeśli masz 20 kolumn, to na przykład 50px.

Answer 4

Należy określić ZASADY stylów max-width i display (ponieważ atrybut wyświetlania jest ustawiony jako zabawny, ponieważ jest to element td, a nie normalny), np.

td{ 
    max-width: 100px; 
    display: inline-block; 
} 

Answer 5

Istnieje również dobre rozwiązanie z właściwością max-width: 0px; więc będzie odpowiedzialny za pełną szerokość stołu.