CSSを使用して動的テキストに基づいて同じ高さと幅を設定する方法

Question

<div>Some dynamic text</div>の場合は、widthが動的テキストによって決定されたときに、divの等幅の高さと幅をどのようにして作成しますか？既知の幅に基づいて同じ高さを設定することと同様に

Answer 1

あなたはdiv内部の単一の段落要素を配置し、pmarginを考慮に入れcalc()を使用して与えることができますdivのwidth（%は常に親要素のwidthに基づいているため）。

実施例は：

div { 
 
display: inline-block; 
 
color: rgb(255, 255, 255); 
 
background-color: rgb(255, 0, 0); 
 
padding: 6px; 
 
} 
 

 
p { 
 
margin: calc(50% - 12px) 0; /* half the width minus half the line-height */ 
 
font-size: 18px; 
 
line-height: 24px; 
 
}

<div> 
 
<p contenteditable="true">Click me &amp; edit to change div size.</p> 
 
</div>

Answer 2

ここで答えとして：https://stackoverflow.com/a/6615994/2479962

あなたが第一の容器内の動的テキストを含み、動的テキスト要素上（この場合:beforeに）マージンプッシャーを追加します。

JS fiddle

<div class="container"> 
    <div class="element"> 
     Dimensions set by content. 
    </div> 
</div> 

トリックは、動的コンテンツfont-sizeとオフ.element:beforeのマージンをベースにあります：のみ

CSS：

JS Fiddle - Vertically centered

：@浪人の提案で

.container { 
    display: inline-block; 
    position: relative; 
    background-color: silver; 
} 
.element { 
    font-size: 20px; 
    padding: 10px; 
    /* So we don't have to take line-height into consideration during calc() */ 
    line-height: 1; 
} 
.element:before { 
    content: ''; 
    display: block; 
    /* 100% is for 1:1 aspect ratio */ 
    /* 20px is taking the contents font-size plus the padding on each side */ 
    margin-top: calc(100% - 20px); 
} 

---

、我々は垂直:beforeと:afterの両方を使用して2で計算を分割し、それを中央にすることができます

.element:before, .element:after { 
    content: ''; 
    display: block; 
    /* 100% is for 1:1 aspect ratio */ 
    /* 10px is taking the contents font-size plus the padding on each side/2 */ 
    margin-top: calc(50% - 10px); 
}