CSS 2 Line Wrap tekstowy Ellipsis

Próbuję dodać element div o stałym rozmiarze, który zawijał tekst i również wyświetlał elipsę na przepełnieniu.CSS 2 Line Wrap tekstowy Ellipsis

Czy to możliwe?

Oto gdzie jestem tak daleko:

.mydiv { 
 
     font-family: Georgia, "Times New Roman", Times, serif; 
 
     font-size: 14px; 
 
     line-height: 20px; 
 
     display: block; 
 
     overflow: hidden; 
 
     text-overflow: ellipsis; 
 
     width: 120px !important; 
 
     height: 40px !important; 
 
     border: 1px solid #000000; 
 
}

<div class="mydiv"> 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

Źródło

2012-03-01 ftsk33

duplikat http://stackoverflow.com/questions/5914783/simulate-text-overflow-ellipsis-in-css2? – blobmaster

Jak najlepiej jak mogę powiedzieć, to nie jest możliwe, no: wszystko wsparcie dla text-overflow: wielokropek wymaga white-space: nowrap (co oczywiście ogranicza go do pojedynczej linii i nie spełnia twoich pierwszych wymagań).

Dla owijania wielowierszowego, a następnie wielokropka, myślę, że utkniesz z rozwiązaniem javascript (na przykład jTruncate).

Źródło

2012-03-01 22:55:52

Sprawdź również np. http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe for other other multiline & ellipsis solutions. –

CSS 2 Line Wrap tekstowy Ellipsis

Odpowiedz

Powiązane problemy