CSSの内容に応じてブロックのサイズを変更する方法はありますか？

Question

コンテンツの長さに応じて幅と高さを変更できるボックスを作成したいと思います。だから、もしそれがちょうど1つの行を持っていれば、それはより小さい高さを持つべきです。それが10行ある場合、それはより大きい高さを持っているはずです。ボックスを中心にしたいと思っています。前もって感謝します。私はすでにこのコードを持っている：

<div style=" border: 1px solid black; margin-left: auto; margin-right: auto; max-height: 25em; max-width: 20em; min-height: 10em; min-width: 12em; position: relative; white-space: nowrap"> 
<img src="https://4.bp.blogspot.com/-4wmRO867-W4/V7qwJGfVBYI/AAAAAAAAAL0/XQHdOxK34asRSXt3FfBKnOS_wGRcneFEwCEw/s1600/quote_basic.png" style="border: none; clear: left; float: left; position: relative;" /> 
<span style="font-style: italic; left: 50%; margin-right: -50%; margin: 0; position: absolute; text-align: center; top: 50%; transform: translate(-50% , -50%); display: inline-block;"> "This is the one-line content" </span> 
<img src="https://4.bp.blogspot.com/-kg4kc90TSqs/V7rjthACJLI/AAAAAAAAAMM/sV7buqkUWH8KqYfBVlCGnq14qMdo4eetwCLcB/s1600/quote_basic_mirrored.png" style="border: none; clear: right; float: right;position: relative; top: 8em" /> 
</div> 

Answer 1

私はそのコンテンツの長さに応じて、その幅と高さを変更することができますボックスを作成したいと思います。

display:inline-blockこれのほとんどを行います。唯一の注意点は、ボックスがその親の100％の幅に達するまでボックスが広がり続けることです。

その後、前にテキストの破壊を強制する唯一の方法は、センタリングに関してはどちらかwidthかmax-width

body { 
 
    text-align: center; 
 
} 
 
blockquote { 
 
    position: relative; 
 
    padding: 30px 60px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    border: 1px solid grey; 
 
} 
 
blockquote:before, 
 
blockquote:after { 
 
    position: absolute; 
 
    width: 60px; 
 
    height: 60px; 
 
    font-size: 120px; 
 
    line-height: 120px; 
 
    font-family: Lobster; 
 
} 
 
blockquote:before { 
 
    top: 0; 
 
    left: 0; 
 
    content: "\201C"; 
 
} 
 
blockquote:after { 
 
    bottom: 0; 
 
    right: .0; 
 
    content: "\201D"; 
 
}

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 
 

 
<blockquote> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, repellat.</span> 
 
</blockquote> 
 

 
<blockquote> 
 
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span> 
 
</blockquote> 
 

 
<blockquote> 
 
    <span>Lorem ipsum dolor.</span> 
 
</blockquote>

を適用することです。要件に応じてのテクニックがあります。ここで

Answer 2

が、私はこれを行うだろうかです：

私はすべてのインラインCSSをストリップダウン：http://screencast.com/t/cSyF3mkvTS

：

<div> 
<img src="https://4.bp.blogspot.com/-4wmRO867-W4/V7qwJGfVBYI/AAAAAAAAAL0/XQHdOxK34asRSXt3FfBKnOS_wGRcneFEwCEw/s1600/quote_basic.png"/> 
<p> "This is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line contentThis is the one-line content" </p> 
<img src="https://4.bp.blogspot.com/-kg4kc90TSqs/V7rjthACJLI/AAAAAAAAAMM/sV7buqkUWH8KqYfBVlCGnq14qMdo4eetwCLcB/s1600/quote_basic_mirrored.png"/> 
</div> 

div { 
    border: 1px solid #000; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    width: 50%; 
} 

p { 
    padding: 40px; 
} 

div img:nth-of-type(1) { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

div img:nth-of-type(2) { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

そして、ここでは、結果の小さなビデオです