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

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

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

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

Есть ли способ установить максимальное количество символов в классе или отключить перенос после определенного количества строк? И, возможно, даже добавить какой-нибудь CSS-эффект для вставки содержимого: "..."; до конца строки, чтобы показать, что она была отрезана?

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

Спасибо.


layout css word-wrap character-limit
person popsicle    schedule 11.12.2012    source источник
comment
text-overflow:ellipsis, вероятно, ближе всего к тому, что вам нужно. Однако он не поддерживается в старых браузерах.   -  person Christoph    schedule 11.12.2012
comment
Ах, идеально, чувак. Повозился с пробелами, переполнением текста: многоточием и т. д., и это дало мне именно то, что я хотел. Спасибо.   -  person popsicle    schedule 11.12.2012
comment
хе-хе, я как раз собирался создать для вас пример скрипта, а потом увидел ваш комментарий;) Вы можете принять мой ответ, если ваша проблема была решена с его помощью. счастливое кодирование. Ваше здоровье   -  person Christoph    schedule 11.12.2012

Ответы (2)


arrow_upward
25
arrow_downward

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

Пример

<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;   
}​
person Christoph    schedule 11.12.2012

arrow_upward
9
arrow_downward

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

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

.twoLines{
   height:30px;
   line-height:15px;
   overflow:hidden;
}
person Viktor S.    schedule 11.12.2012