Как ограничить ограничение символа линией или # символов с помощью css?

Question

Есть ли свойство css, которое может выполнять одно из следующих действий? Но сначала позвольте мне объяснить.

Представьте себе макет, где каждый элемент имеет ширину: 200 пикселей; и каждая из них будет высотой: 250 пикселей; (это просто пример).

В каждом элементе есть миниатюра и ссылка, а часто время, эта ссылка обертывается на 2-3 строки и, следовательно, делает высоту каждого элемента разным.

Есть ли способ установить максимум # символов внутри класса или обрезать завершение после определенного количества строк? И, возможно, даже добавить эффект css для вставки контента: «...»; до конца строки, чтобы показать, что она была отрезана?

Любая помощь приветствуется.

спасибо.

Answer 1

Вы можете попробовать text-overflow, однако он имеет некоторые ограничения, но все еще может вам номер:

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

Не символы, но вы можете установить ширину элемента в пикселях и использовать свойство text-overflow, которое должно добавить «...».

Кроме того, вы можете ограничить количество строк, установив высоту элемента, например, 30px и установив свойство CSS высотой 15px и добавив overflow:hidden. Таким образом, у вас будут точные две строки текста.

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