Come posso inserire testo dinamico in un div con posizione assoluta?

Question

Dai un'occhiata a http://www.barelyfitz.com/ screencast / html-training / css / posizionamento / voce 6. Dice:

  

Non è una soluzione praticabile per la maggior parte dei progetti, perché di solito non sappiamo quanto testo sarà presente negli elementi o le dimensioni esatte dei caratteri che verranno utilizzati.

Quale soluzione alternativa devo usare per inserire testo dinamico in un div con posizione assoluta?

Qualsiasi approccio è il benvenuto

saluti,

Answer 1

Se il tuo obiettivo principale è mantenere il div al suo posto, senza modificarne l'altezza o la larghezza in base alla quantità di testo, andrei con:

div {
    overflow: scroll;
}

L'altra opzione è quella di ridurre le dimensioni del testo per adattarle al div, ma ciò comporta una certa quantità di matematica sfocata e si corre il rischio che il testo sia così piccolo che sia inutile.

Se vuoi che il div cambi la sua altezza in base al testo, questo comporta anche un po 'di matematica sfocata, ma in sostanza, otterrai la lunghezza del testo con:

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

E modifica l'altezza in relazione a quella lunghezza. Ti piacerebbe giocare con i numeri, ma sarebbe simile a:

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

Answer 2

Vedi la sezione Effetti visivi dal sito W3C qui

Answer 3

Forse usando " overflow: auto " per il div dinamico-text-container. Quindi l'altezza non è un problema.

Answer 4

Il problema non sta nel mettere il testo dinamico nel div assolutamente posizionato: il div si espanderà per adattarsi a qualsiasi testo sia presente. Non ci sono altezze definite sui div rossi e verdi nel tuo esempio.

I div posizionati in modo assoluto vengono esclusi dal flusso del documento, quindi tutto ciò che appare dopo di loro nell'html si comporterà come se non fossero nemmeno lì.

I progetti che utilizzano div posizionati in modo assoluto devono avere un'altezza definita sul div contenente in modo che i div posizionati in modo assoluto non si sovrappongano ad altri contenuti. Nel tuo esempio <div id="div-1"> ha un'altezza di 250 px definita. Cambialo in 100px e vedrai <div id="div-after"> spostarsi sotto i div rossi e verdi.

Quindi se hai un div assolutamente posizionato in una barra laterale senza nulla dopo puoi aggiungere tutto il testo dinamico che desideri. Se ne hai uno nella tua intestazione, renderà il tuo design molto complicato da implementare.