Come aumentare la larghezza div in base al testo al suo interno?

Question

Ho un div in cui gli utenti inseriscono del testo. Ma voglio aumentare la sua larghezza in base al suo testo, fino a un massimo del 50% dello schermo. Il mio codice CSS:

.messages { 
    max-width:50%; 
    min-width:150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
} 

Risultato:

C'è un sacco di spazio dopo il messaggio "555", voglio che questa dimensione solo se l'utente immette del testo come:

Quindi, come posso aumentare la larghezza del div dinamicamente, a seconda delle dimensioni del testo?

Answer 1

Ci sono molti modi per raggiungere questo obiettivo, ma IMHO il più pulito è il seguente. Il tuo problema è che le scatole sono "golose" e proveranno ad espandersi alla larghezza disponibile.

Per evitare questo, è possibile:

• Make it "float: left;"
• Ma anche "chiaro: sinistra;" per prevenire ulteriori elementi "left floating" per utilizzare lo spazio disponibile sulla destra.

Il CSS diventa:

.messages { 
    max-width:50%; 
    min-width:150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
    float: left; 
    clear: left; 
} 

ho fornito completo di codice e la spiegazione supplementare (al passaggio del mouse) sul Liveweave qui: http://liveweave.com/DFCZFj

Answer 2

Provare a cambiare display tipo di divisione in table.

Example Here

.messages { 
    display: table; 
    max-width: 50%; 
    min-width: 150px; 
    /* other declarations omitted due to brevity */ 
} 

Answer 3

Just Add display:inline;. Puoi anche rimuovere la proprietà della larghezza minima, altrimenti se il testo è più piccolo, avrai ancora quel vuoto.

Answer 4

elementi di blocco (div s' default tipo di visualizzazione) tenterà di recuperare lo spazio orizzontale massimo del contenitore. Immagina un implicito width:100% ogni volta che li vedi. inline-block creerà elementi a livello di blocco in cui l'elemento successivo tenterà di eseguire il rendering in orizzontale adiacente (a condizione che vi sia spazio sufficiente). . Questo è ciò che si desidera utilizzare (display: table lavorerà in questa soluzione, come pure, ma ha le sue idiosincrasie li evito

Quindi la soluzione richiede tre parti:.

In primo luogo, è necessario specificare che le righe saranno non più grande di 50% della superficie disponibile potrai farlo con una cornice esterna:..

.frame { 
    max-width:50%; 
} 

successivo, i messaggi stessi dovrebbero ogni essere dato spazio intera riga (s) in un momento così utilizzeremo un tag div non decorato attorno a ciascun messaggio.

Infine, si utilizzerà display: inline-block per gli elementi interni più esterni messages. Poiché sono l'unico figlio del loro tag padre, non dovrai preoccuparti di elementi che si avvolgono l'uno sull'altro. Utilizzando il blocco inline, viene rispettata la larghezza e questo ci dà un ottimo posto per applicare il colore di sfondo.

.messages { 
    display: inline-block; 
    min-width: 150px; 
    background: #ffeec0; 
    padding:2px; 
    margin:3px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    border:1px solid #ffdd7c; 
} 

Proprio come un riferimento, ci si aspetterebbe il vostro codice sarà simile alla seguente:

<div class="frame"> 
    <div><div class="messages">2014</div></div> 
    <div><div class="messages">2014</div></div> 
    <div><div class="messages"> 
    2014-09-20 17:46:41 minhavidaemquotes:555 
    </div></div> 
    <div><div class="messages"> 
    2014-09-20 17:46:41 minhavidaemquotes:555 this is some extra 
    text 
    </div></div> 
</div> 

penso che troverete questo ti dà l'effetto desiderato. A proposito, questa è una soluzione generale, ma se scegli uno min-width più grande di 50%, ti assicurerai che due fratelli di tipo inline-block siano troppo larghi per una linea. Se si esegue questa operazione, è possibile fare a meno del supplemento div nel markup.