Как да огранича лимита на знаците по ред или брой знаци с css?

Има ли свойство на css, което може да направи едно от следните? Но първо нека обясня.

Представете си оформление на зидария, където всеки елемент е с ширина: 200px; и всеки ще бъде с височина: 250px; (това е само пример).

Във всеки елемент има миниатюра и връзка и често пъти тази връзка се увива на 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, което трябва да добави " ...".

Освен това можете да ограничите броя на редовете, като зададете височина на даден елемент например на 30px и зададете CSS свойството за височина на линията на 15px и добавите overflow:hidden. По този начин ще имате точно два реда текст.

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