Как я могу вставить динамический текст в div с абсолютной позицией?

Question

Взгляните на http://www.barelyfitz.com/screencast/html-training/css/positioning/ пункт 6.В нем говорится:

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

Какой обходной путь мне нужно использовать, чтобы вставить динамический текст в div с абсолютной позицией?

Любой подход приветствуется

с уважением,

Answer 1

Если ваша основная цель - сохранить div на своем месте, не изменяя его высоту или ширину в зависимости от объема текста, я бы выбрал:

div {
    overflow: scroll;
}

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

Если вы хотите, чтобы div менял свою высоту в зависимости от текста, это также требует некоторой нечеткой математики, но в основном вы получите длину текста с:

var sometext = "Hey, I'm some text!";
var textlength = sometext.length();

И измените высоту по отношению к этой длине.Вы бы хотели поиграть с цифрами, но это выглядело бы примерно так:

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");

Answer 2

Смотрите раздел визуальных эффектов на сайте W3C здесь

Answer 3

Может быть, используя "переполнение:авто" для динамического текстового контейнера div.Таким образом, высота не является проблемой.

Answer 4

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

Абсолютно позиционированные divs удаляются из потока документа, поэтому все, что появляется после них в html, будет действовать так, как будто их там вообще нет.

Проекты, которые используют абсолютно позиционированные divs, должны иметь высоту, определенную в содержащем div, чтобы абсолютно позиционированные divs не перекрывали другой контент.В вашем примере <div id="div-1"> имеет определенную высоту 250 пикселей.Измените это значение на 100 пикселей, и вы увидите <div id="div-after"> двигайтесь под красными и зелеными разделителями.

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