CSS의 내용에 따라 블록의 크기를 어떻게 바꿀 수 있습니까?

Question

내용의 길이에 따라 너비와 높이를 변경할 수있는 상자를 만들고 싶습니다. 따라서 한 줄의 선이 있다면 더 작은 높이를 가져야합니다. 줄이 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>

을 적용하는 것입니다. 요구 사항에 따라 개의 기술이 있습니다. 나는 모든 인라인 CSS를 벗었

: 여기

Answer 2

내가이 할 것 어떻게

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

을 그리고 여기 결과의 작은 비디오입니다 : http://screencast.com/t/cSyF3mkvTS