ограничение всего текста 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