2012-03-01 6 views
5

Sto tentando di aggiungere un div di dimensioni fisse per il testo a capo e anche i puntini di sospensione su overflow.CSS 2 Line Text Wrap Ellipsis

È possibile?

Ecco dove sono a finora:

.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>

+0

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

risposta

3

come meglio posso dire, questo non è possibile, no: tutto il supporto per il testo-overflow: puntini di sospensione richiede white-space: nowrap (che ovviamente lo limita a una singola riga e non soddisfa il tuo primo requisito).

Per il wrapper multilinea, quindi i puntini di sospensione, penso che sarete bloccati con una soluzione javascript (ad esempio jTruncate).

+0

Controllare anche ad es. http://stackoverflow.com/questions/3404508/cross-browsers-mult-lines-text-overflow-with-ellipsis-appended-within-a-widthhe per altre soluzioni multilinea ed ellissi. –