Come limitare il limite di caratteri per riga o # di caratteri con css?

Question

Esiste una proprietà css che può eseguire una delle seguenti operazioni? Ma prima, lasciami spiegare.

Immaginate un layout in muratura in cui ogni articolo è larghezza: 200 px; e ciascuno sarebbe altezza: 250 px; (Questo è solo un esempio).

In ciascuna voce è presente una miniatura e un collegamento e, spesso, questo collegamento si estende su 2-3 righe e pertanto rende l'altezza di ogni elemento diversa.

C'è un modo per impostare un numero massimo di caratteri all'interno di una classe o tagliare il wrapping dopo un certo numero di righe? E forse anche aggiungere qualche effetto CSS per inserire il contenuto: "..."; prima della fine della linea per mostrare che è stato interrotto?

Qualsiasi aiuto è apprezzato.

Grazie.

Answer 1

Si può provare text-overflow, tuttavia ha alcune restrizioni, ma ancora potrebbe Suite è:

Example

<div id="container"> 
    This is some short content to demonstrate the css-property 
    text-overflow 
</div>​ 

#container{ 
    width:100px; 
    height:50px; 
    border:1px solid red; 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space: nowrap; 
}​ 

Answer 2

Non caratteri, ma è possibile impostare una larghezza di un elemento in pixel e utilizzare la proprietà text-overflow che dovrebbe aggiungere "...".

Inoltre, è possibile limitare il numero di righe impostando l'altezza di un elemento, ad esempio 30px e impostando la proprietà CSS altezza riga su 15px e aggiungendo overflow:hidden. In questo modo avrai due righe di testo esatte.

.twoLines{ 
    height:30px; 
    line-height:15px; 
    overflow:hidden; 
}