Come fare un <p> o <div> adattabile al contenuto?

**Donovant** · 21-11-2007, 03:15

Salve ragazzi, vorrei sapere come fare ad adattare un

o <div>, in lunghezza o altezza, al contenuto (testo o immagine).

Questo è il quello che ho fatto in CSS:

p{
margin: 50px 50px 20px;
border: 1px solid white;
font-size: 24px;
font-weight: bold;
text-align: center;

}

Io vorrei che il testo entrasse su una linea unica e che il <div> o quello che è si adattasse, mentre invece quando il testo è troppo lungo si dispone su più linee..., ergo il contenuto si adatta al "tag"
Help me, thanks!

**fcaldera** · 21-11-2007, 11:57

imposta un altezza fissa al div (o quello che è) e assicurati che sia largo a sufficienza per contenere il testo se sta su una solo linea.

al paragrafo dai height: 100%; (e forse anche display : block)

**Donovant** · 21-11-2007, 12:33

No, allora nn mi sono spiegato. Vorrei che il DIV o quello che è, si adattasse alla lunghezza del testo, visto che la pagina viene creata dinamicamente e non so quanto lungo potrebbe essere il testo (che sono titoli di films).

**fcaldera** · 21-11-2007, 12:40

Originariamente inviato da Donovant
...Vorrei che il DIV o quello che è, si adattasse alla lunghezza del testo...

Allora di default è questo il comportamento che ci si aspetta.

In assenza di dimensioni assegnate al div ed al paragrafo il div si adatta (in altezza) alle dimensioni del paragrafo

codice:

<div style="border: 1px #ccc solid">
   


        lorem ipsum etc etc etc  ... prova ad aggiungere altro testo qui dentro:
        il div si dimensiona in verticale di conseguenza (guarda il bordo grigio che delimita
        il contenitore)
   </p>
</div>

**Donovant** · 21-11-2007, 12:48

Hmm... quindi si adatta in altezza e non in lunghezza,....ke palle.
Ok grazie.

**fcaldera** · 21-11-2007, 12:57

veramente lo fa anche in larghezza... io ho specificato "in altezza" perchè mi sembrava fosse quello il tuo problema

prova ad assegnare un bordo anche al paragrafo, noterai che si prende tutto lo spazio orizzontale a disposizione.

P.s. sorry, ti ho editato il post per errore (avevo scritto la mia risposta dentro il tuo post).

**Donovant** · 21-11-2007, 13:10

Scusa, allora mi sa che non sto capendo io....

asdasdasdasdasdasdasdasdasdasdasdasdasdasdasdasdas dasd</p>

Vorrei che questo si adattasse al CSS, ma se non do dimensioni lui si prende tutto lo spazio in lunghezza anche se il testo è formato da una sola lettera....quindi il bordo colorato di bianco, si vedrà per tutta la larghezza della pagina, io invece vorrei che gli stessse attaccato e che in caso il testo fosse di 10 lettere anzichè una "p" si adattasse alle 10 lettere allungandosi, ma non che il testo per adattarsi al "p" del CSS venisse scritto su più righe.

p{ border:1px solid white; }

**fcaldera** · 21-11-2007, 13:18

intendi così?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>xhtml 1.0</title>

        <style type="text/css">
            p {
                display: inline;
            }
        </style>
    </head>

<body>

<div style="border: 1px #ccc solid">
   <p  style="border: 1px #c00 solid">
        lorem ipsum etc etc etc  ... prova ad aggiungere altro testo qui dentro:
        il div si dimensiona in verticale di conseguenza (guarda il bordo grigio che delimita
        il contenitore)
   </p>
</div>

<div style="border: 1px #ccc solid">
   <p  style="border: 1px #c00 solid">
        testo corto
   </p>
</div>
</body>
</html>

in questo modo il

non si sviluppa in larghezza se il testo è più corto

**Donovant** · 21-11-2007, 13:24

Si perfetto, intendevo proprio questo.

**Donovant** · 21-11-2007, 13:48

Mahh... Io non capisco perchè se scrivo:

codice:

<p  style="border: 1px #c00 solid; margin:10px 10px; float:left; clear:left;">
        testo corto tuytyutyyutytyt
</p>

funziona, mentre se scrivo:

codice:

<style type="text/css"">

html, body { margin: 0; padding: 0; background-color: Black; color:White; font-size: 14px;}

p#unariga{ border:1px solid white;}

</style>

<p id="unariga">testo corto tuytyutyyutytyt</p>

Non funge...

Discussione: Come fare un <p> o <div> adattabile al contenuto?

Strumenti discussione

Ricerca discussione

Visualizza

Come fare un <p> o <div> adattabile al contenuto?

Permessi di invio