Jak ograniczyć limit znaków po linii lub # znaków za pomocą css?

Question

Czy istnieje właściwość css, która może wykonać jedną z następujących czynności? Ale najpierw pozwól mi wyjaśnić.

Wyobraź sobie układ muru, w którym każdy element ma szerokość: 200 pikseli; a każdy będzie miał wysokość: 250px; (To tylko przykład).

W każdym elemencie znajduje się miniatura i link, a często ten link jest zawijany do 2-3 wierszy, co powoduje, że wysokość każdego elementu jest inna.

Czy jest jakiś sposób ustawić maksymalną liczbę znaków w klasie lub odciąć zawijanie po określonym # linii? A może nawet dodać efekt css do wstawienia treści: "..."; przed końcem linii, aby pokazać, że został odcięty?

Każda pomoc jest doceniana.

Dziękuję.

Answer 1

Można spróbować text-overflow, jednak ma pewne ograniczenia, ale nadal może swoich wam:

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

Nie znaki, ale można ustawić szerokość elementu w pikselach i użyć właściwości text-overflow, która powinna dodać "...".

Możesz także ograniczyć liczbę linii, ustawiając wysokość elementu, na przykład 30px i ustawiając właściwość CSS wysokości linii na 15px i dodając overflow:hidden. W ten sposób będziesz miał dokładnie dwa wiersze tekstu.

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