Możemy natrafić się na problem kiedy chcemy by nasza tabela zawierała długi tekst ale ten tekst ma mieścić się w jednej lini i może być ucięty i dodane do niego "..." jako informacja że coś więcej może być. 

To co otrzymujemy:

-------------------------------------------------
|Kolumna 1                  |Kolumna 2          |
-------------------------------------------------
|tekst w kolumnie pierwszej |tekst w drugiej    |
|jest zawinięty             |kolumnie           |
-------------------------------------------------

Chcemy coś takiego: 

 

-------------------------------------------------
|Kolumna 1                  |Kolumna 2          |
-------------------------------------------------
|tekst w kolumnie pierw ... |tekst w drugiej ...|
-------------------------------------------------

Jak to zrobić? wystarczy użyć poniższego kodu. 

table {table-layout:fixed}
td { overflow:hidden; 
     white-space:nowrap;
     text-overflow: ellipsis;
}

Dodaj komentarz

2 + 4 =