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

Question

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

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

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

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

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

С уважением,

621 4

html css design css-position

4 ответов:

Comments

Ничего не найдено.

Anthony · Accepted Answer · 2016-01-18 07:35:07

Если ваша основная цель-сохранить 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");

score 1 · Accepted Answer · 2009-09-12 17:24:13

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

jfunez · Accepted Answer · 2009-09-12 07:52:48

Возможно использование "overflow: auto" для динамического текстового контейнера div.So высота-это не проблема.

Emily · Accepted Answer · 2009-09-13 15:28:31

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

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

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