Como posso inserir texto dinâmico em um div com posição absoluta?

Question

Dê uma olhada http://www.barelyfitz.com/ screencast / html-formação / css / posicionamento / artigo 6. Ele diz:

Não é uma solução viável para a maioria dos projetos, porque nós geralmente não sabem quanto texto será nos elementos, ou os tamanhos de fonte exatas que serão utilizados.

O que solução alternativa que eu preciso para usar a fim de inserir texto dinâmico em um div com posição absoluta?

Qualquer abordagem é bem-vinda

Atenciosamente,

Answer 1

Se o seu principal objetivo é manter a div em seu lugar, sem alterá-lo de altura ou largura com base na quantidade de texto, eu iria com:

div {
    overflow: scroll;
}

A outra opção é ter o psiquiatra tamanho do texto para caber no div, mas que envolve uma certa quantidade de matemática difusa e você corre o risco do texto ser tão pequena que é inútil.

Se quiser que o div para mudá-lo de altura com base no texto, isto também envolve alguma matemática difusa, mas, basicamente, você deseja obter o comprimento do texto com:

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

E fazer a mudança de altura em relação ao comprimento. Você gostaria de jogar com os números, mas seria algo parecido com:

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

Answer 2

Veja a seção Visual Effect a partir do site W3C aqui

Answer 3

"Overflow: auto"

Talvez usando para o dynamic text-container div.So a altura não é um problema.

Answer 4

O problema não é colocar o texto dinâmico na div absolutamente posicionado - o div se expandirá para caber qualquer texto que está lá. Não há alturas definidas nas divs vermelho e verde no seu exemplo.

divs posicionados absolutamente são tomadas fora do fluxo do documento para qualquer coisa que aparece depois deles na html vai agir como eles não estão mesmo lá.

projetos que usam divs posicionados absolutamente precisa ter uma altura definida na div contendo assim os divs posicionados absolutamente não se sobrepõem outros conteúdos. No seu exemplo <div id="div-1"> tem uma altura de 250px definido. Mudança que, para 100px e você verá movimento <div id="div-after"> sob as divs vermelhos e verdes.

Então, se você tem um div absolutamente posicionado em uma barra lateral com nada depois que você pode adicionar todo o texto a dinâmica que você deseja. Se você tem um em seu cabeçalho, ele vai fazer o seu design muito complicado de implementar.