Сделайте перенос текста внутри абсолютно расположенного элемента - PullRequest
Новая
       5

Сделайте перенос текста внутри абсолютно расположенного элемента

6 голосов
/ 19 июля 2011

У меня есть абсолютно позиционированный div с текстом внутри него, но он выходит за границы ширины.Если я использую переполнение: скрытый, то переполнение исчезает.Однако я хочу, чтобы текст был перенесен на несколько строк на протяжении высоты.

Я что-то здесь упускаю?Спасибо. 

#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 44px;
height: 50px;
}

Ответы [ 6 ]

6 голосов
/ 19 июля 2011

@ Лоренц;чтобы обернуть слово, вы должны использовать свойство word-wrap в вашем div, как сказал афшин в своем комментарии например 

#absolute_div

    {
        background-color: #8cc63f;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 0px 5px 0px 5px;
        width: 44px;
        min-height: 50px;
        overflow:hidden;
        word-wrap:break-word;
    }

отметьте это http://jsfiddle.net/aE8cg/

4 голосов
/ 19 июля 2011

Я разобрался с примером @ alex's jsfiddle, чтобы проиллюстрировать (далее) мысль, которую он делал.

Текст обернут;однако вы установили высоту.Жесткая высота удержит div от расширения, что, как я полагаю, вы и хотели.Объем текста, который заполняет и заполняет пространство, будет в значительной степени зависеть от ваших line-height, font-size и любых других CSS, которые вы, возможно, применили к содержимому контейнера.

В скрипке, которую я разветвлялЯ установил font-size:10px; line-height:1 - получил 5 строк переноса текста, а остальное содержимое скрыто параметрами высоты / ширины, которые вы задали в своей декларации.

http://jsfiddle.net/Kbzga/

word-wrap,white-space, overflow:visible, вероятно, не то, что вам нужно, если вы не возражаете против зеленого поля 44x50 с выпадающим из него текстом или полосами прокрутки.НТН

0 голосов
/ 06 февраля 2018

Это сработало для меня ... 

white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;
0 голосов
/ 21 июня 2012

У меня некоторое время была такая проблема.

У меня был интерфейс, который принимал пользовательский ввод с небольшим количеством HTML, который затем отображал его сбоку, чтобы показать, как он хочет.

Моя проблема заключалась в том, что я конвертировал все пробелы, введенные пользователем, в  , я хотел сделать это так, чтобы можно было вводить пробелы для форматирования текста; добавить отступы и тому подобное.

Эффект, однако, заключался в том, что он переполнялся вместо того, чтобы оборачивать текст внутри div. Простое решение - вместо этого преобразовать два пробела в    и оставить одни пробелы.

Я понимаю, что это, вероятно, не та же причина для всех остальных, но я надеюсь, что это кому-то поможет!

0 голосов
/ 19 июля 2011

Когда вы используете абсолютное позиционирование и устанавливаете высоту и ширину, содержимое не влияет на саму коробку, поэтому вам просто нужно установить min-height: 50px, и оно будет расти вместе с текстом, как показано здесь вthis jsFiddle .

0 голосов
/ 19 июля 2011

Не совсем уверен, что вы хотите сделать, но overflow:auto может быть тем, что вы хотите. 

#absolute_div
{
background-color: #8cc63f;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
padding: 0px 5px 0px 5px;
width: 144px;
height: 50px;
overflow:auto;    
}

http://jsfiddle.net/jasongennaro/Vqukv/

...