ограничаване на целия html текст в 2 реда

Имам различни размери (дефинирани с CSS) height:50px, width:100px. Искам текстът във всеки да се счупи приблизително наполовина (само ако е твърде дълъг) и да се разшири, ако е необходимо, за да се побере в него.

Сега, когато дължината на текста изисква допълнително място, се разделя на 3 или повече реда и препълва , но не искам нито да скривам, нито да превъртам текста.

Можете да видите кода тук:

CSS:
    div {
        font-size: 20px;
        border: 1px solid;
        width: 100px;
        height: 50px;    
    }
html:
     <div>Lorem ipsum dolor sit amet</div>

html css line-breaks
person Jim Tsatsos    schedule 04.03.2013    source източник
comment
трябва ли да е динамично? или можете да добавите ‹br› тагове, ако желаете?   -  person Eric Goncalves    schedule 05.03.2013
comment
текстът идва от база данни   -  person Jim Tsatsos    schedule 05.03.2013
comment
най-накрая направих това, което ми предложи @EricLemos. Добавих ‹br› тагове, докато обработвах текста в PHP. Благодаря ти! Но не знам как да ти дам кредит   -  person Jim Tsatsos    schedule 05.03.2013

Отговори (2)


arrow_upward
1
arrow_downward

Не можете да направите това само с CSS. Трябва да използвате JavaScript, за да откриете височината и съответно да коригирате или размера на шрифта на ширината на полето.

person Diodeus - James MacFarlane    schedule 04.03.2013
comment
Ти си прав! Не можете да направите това само с CSS! Търсих и тествах това през последните 3 дни. Така че възприемам нов подход към това. Няма да използвам JavaScript, за мен е по-лесно да обработя текста в PHP, да го разделя наполовина с br таг и след това да използвам white-space:nowrap, за да разширя само по ширина - person Jim Tsatsos; 05.03.2013

arrow_upward
0
arrow_downward

Това трябва да свърши работа

div {
display: inline-block;
border: 1px solid;
width: 100px;
height: 50px;  
overflow: hidden;
}

Разбира се, ще трябва да редувате ширината и височината, ако имате различен или по-дълъг текст — в този Тема (както беше споменато по-рано) са предоставени множество решения (PHP/CSS).

person rz-requilel    schedule 04.03.2013
comment
но не искам да скрия преливащия текст - person Jim Tsatsos; 05.03.2013
comment
stackoverflow.com/questions/10584020/overriding-overflow-hidden/ Това ще бъде ли решение за вас? Знам, че overflow:hidden ще скрие всички дъщерни елементи, така че това може да е нещо. - person rz-requilel; 05.03.2013