testo contenutto all'interno del div

emanuelevt · 21 Set 2010

Salve ragazzi; come posso fare in modo che il testo non oltrepassi un div con larghezza fissa; e che quindi il div si allunghi automaticamente?
Nota: non voglio inserire overflow poiché, come spiegato, vorrei che automaticamente il div si allunghi (larghezza fissa) -> il testo è prelevato da un database (e viene formattato anche con i ritorni a capo)e quindi la lunghezza del testo è variabile.
Ho provato a inserire il padding ma il testo oltrepassa ugualmente il bordo destro.
Grazie.

alessandro1997 · 21 Set 2010

Puoi usare gli attributi min-height e min-width che definiscono, rispettivamente, l'altezza e la larghezza minime. Questo significa che se il div conterrà troppo testo si allungherà automaticamente, ma se ne conterrà troppo poco sarà comunque di quelle dimensioni.

borgo italia · 22 Set 2010

ciao
non so se sono ancora arretrato (ma con css2, css3, ...., ie6, ie7,...) credo che min-height e min-width non sia supportato da tutti i bw.
poi non capisco esattamente cosa intendi, se un div ha width fissa es (width=250px

il testo contenuto si adatta a quella larghezza, per height se vuoi che il div si allunghi in funzione del testo puoi mettere height= auto; o se anche l'altezza è fissa gli dai lo scroll (overflow:scroll)

p.s.
dopo 250px avevo messo puntoevirgola parentesi, ma si vede la faccina che ride (?)

emanuelevt · 22 Set 2010

ciao, grazie dell'interesse - mi spiego meglio:

Lo scopo è quello che il div si deve adattare, ridimensionando solo la sua lunghezza (in quanto la larghezza la imposto ad un valore fisso) alla dimensione del testo, per il semplice fatto che la lunghezza di questo è variabile (in quanto è prelevato da un database).

min-height è la soluzione giusta, ma come dice Borgo non è supportata da tutti i browser; ma esiste una soluzione, quindi per completezza posto un esempio che ho ricavato online:

Codice:

.......
<style type="text/css">
body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222}
div.box{
   [COLOR="blue"] float:left[/COLOR];padding:20px; 5px;width:180px;margin-right:10px;background: #A7BFE3;
    [COLOR="blue"]height:auto !important;[/COLOR]
    [COLOR="blue"]height:200px;
    min-height: 200px;[/COLOR]
    }
</style>
.......

<body>
<div class="box">Qui il testo</div>
<div class="box">Altro div ... Eouu au i ua eu ieou uoi oeo aoaea ioi iuiee i uoie eo eiue eue ioeu ee o aeio eo ie iu ii euie uea.
Oa u eea iioi o ieue ooooi oei ie ueo aoie eeoe i uoi oi i uoo ouou eauue eii oaoi iai iu o ooe oeii.
Aue oeei iioe eoi ouue uiae ouu ueuoo uaio iu uauu oeo aoou aea oo uiiiu auie uiu oaui u a e.</div>
<div class="box">Molto testo qui...Uiie aio oo aee eiu oe ai eou oeia eao i e u i oie ou ueo ie oeoe o e iuio iii ou ae oiuu uioi.
Iia oeu eaie e uauu ue o uau ioe uei aoe uoi uuai ou ua uo uoie eo ioiu a ooo io aeu aeo ooo iaoii e aeue iea a.
Ueue ie iaio eo iioa aoeei oeoe uu u iauu uei euu oe o oie oeeu o ea iiioe ouei ua iuu aiu oei o auou ia oao.
Uoiio u iooa 
</div>
....

borgo italia · 22 Set 2010

ciao
perfetto
se invece vuoi che il div si adatti esattamente al testo togli
height:200px; e min-height: 200px;
se vuoi i div uno sotto l'altro e non affiancati dagli il clear: left;

Cerca

Cerca

testo contenutto all'interno del div

emanuelevt

Utente Attivo

alessandro1997

Utente Attivo

borgo italia

Super Moderatore

emanuelevt

Utente Attivo

borgo italia

Super Moderatore

Discussioni simili