Taille automatique de la bulle de texte CSS?

Question

/* Normal Bubble */ 
.bubble { 
    width: auto; 
    font-size: 0.75em; 
    margin-bottom: 24px; 
} 

.bubble blockquote { 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #c9c2c1; 
    background-color: #000; 
} 

.bubble blockquote p { 
    margin: 10px; 
    padding: 0px; 
     font-size: 21px; 
} 

.bubble cite { 
    position: relative; 
    margin: 0px; 
    padding: 7px 0px 0px 15px; 
    top: 6px; 
    background: transparent url(b/tip.gif) no-repeat 20px 0; 
    font-style: normal; 
} 

J'ai cela pour mes commentaires .. qui ressemble à "bulles de discours".

Je ne veux pas grand depuis le début, je veux l'avoir personnalisé après le texte .. Je veux dire que si vous avez écrit "bonjour" alors il devrait être autour avec peut-être 1-2px marge de la bulle, donc si vous avez écrit "Bonjour mon nom est et j'aime cuisiner!" alors il devrait être plus grand ... c'est comme ça en ce moment:

<div class="bubble"> 
      <blockquote> 
<p>the comment text is here</p> 
     </blockquote> 
     <cite>Written by me</cite> 
</div> 

Answer 1

Voulez-vous dire comme ça?

.bubble blockquote p { 
    display: inline; 
    /*(...)*/ 
} 

Voir http://www.htmldog.com/reference/cssproperties/display/

Answer 2

Je ne sais pas tout à fait ce que vous demandez soit.

Peut-être que vous faites référence à la création d'un popup (en utilisant des images) qui évolue en fonction de la taille du contenu? Pour ce faire, vous avez besoin de plusieurs images qui se chevauchent. Il ne fait qu'échelonner dans une direction (verticalement ou horizontalement) vous avez besoin de deux images, si elle évolue dans les deux sens, vous devez créer quatre images. Cette technique est parfois appelée "sliding doors".

Answer 3

Par défaut, div est un niveau de bloc et, par conséquent, étend sa largeur à la largeur de son conteneur parent (plutôt que son contenu).

Deux options à envisager serait de mettre la div à afficher

: inline-block

Ou flotter.