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; 
} 

У меня есть это для моих комментариев .. это выглядит как «пузыри речи».

Я не хочу, чтобы он был большой с самого начала, я хочу, чтобы он был настроен после текста. Я имею в виду, если вы написали «привет», то он должен быть вокруг него, возможно, с 1-2px маржи от пузыря, так что если вы написали «Привет, мое имя, и я люблю готовить!» то это должно быть больше ... вот так:

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

Answer 1

Вы хотите сказать это?

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

См http://www.htmldog.com/reference/cssproperties/display/

Answer 2

Я не уверен совсем то, что вы просите либо.

Возможно, вы имеете в виду создание всплывающего окна (используя изображения), которое масштабируется в соответствии с размером содержимого? Для этого вам нужно несколько перекрывающихся изображений. Он масштабируется только в одном направлении (по вертикали или по горизонтали) вам нужно два изображения, если оно масштабируется в обоих направлениях, вам нужно создать четыре изображения. Эта техника иногда называется "sliding doors".

Answer 3

Разница по умолчанию является уровнем блока и, следовательно, расширяет ее ширину до ширины ее родительского контейнера (а не его содержимого).

два варианта, чтобы рассмотреть бы установить DIV в

дисплей: встроенный блок

Или плавать его.