ラベルのテキストの長さに基づいてコンテナの幅を伸ばす方法は？

Question

ラベルとアイコンを含むカスタムボタンを実装しようとしています。
ラベルのテキストが長すぎると、オーバーフローしてしまうという問題があります。
私の目標は、ラベルテキストの幅に基づいて、CSSを使用してボタンを反応的にすることです。

これは私がこれまでに得ることができたものです：jsFiddle

.btn_container{ 
 
    position: relative; 
 
    background-color: green; 
 
    height: 40px; 
 
    width: 100px; 
 
} 
 

 
.btn_label{ 
 
    position: relative; 
 
    background-color: red; 
 
    width: 70%; 
 
    height: 100%; 
 
    float:left; 
 
} 
 

 
.btn_icon{ 
 
    position: relative; 
 
    background-color: blue; 
 
    width: 30%; 
 
    height: 100%; 
 
    float: right; 
 
} 
 

 
label{ 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="btn_container"> 
 
    <div class="btn_label"> 
 
    <label>Text i want to fit in the div...</label> 
 
    </div> 
 
    <div class="btn_icon"> 
 
    <i class="fa fa-plus"></i> 
 
    </div> 
 
</div>

問題は応じてラベルテキストがオーバーフローし、「btn_label」と「btn_container」幅が延伸される必要がある場合、ありますラベルテキストの幅に合わせます。

どうすれば実現できますか？

Answer 1

フィドルであなたが共有するコードといくつかの問題

1. あなたは親のdiv（.btn_container）を伸ばしたい場合は、あなたが幅を設定する理由があります。それに100pxには？使用width:auto

2. これはドキュメントのデフォルトの流れの外に行くための要素を引き起こし、そう、あなたがposition:absoluteを使用している場合は、

3. をたくない、btn_containerに幅を設定する必要がfloat:leftを使用しないでくださいテキスト上では、幅は他の要素によって決して考慮されません。だから、位置を使用しないよう：絶対したい場合は、それは

はあなたが作る必要があり、以下の溶液またはjsFiddle

.btn_container { 
 
    position: relative; 
 
    background-color: green; 
 
    height: 40px; 
 
    width: auto; 
 
    display: inline-block; 
 
} 
 
.btn_label { 
 
    position: relative; 
 
    background-color: red; 
 
    width: auto; 
 
    height: 100%; 
 
    display: inline-block 
 
} 
 

 
.btn_icon { 
 
    position: relative; 
 
    background-color: blue; 
 
    width: auto; 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 

 
label {}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="btn_container"> 
 
    <div class="btn_label"> 
 
    <label>Text i want to fit in the div...</label> 
 
    </div> 
 
    <div class="btn_icon"> 
 
    <i class="fa fa-plus">+</i> 
 
    </div> 
 
</div>

Answer 2

とスニペットを参照幅のITに依存する幅持っている親です@media（最小幅または最大幅）の分割点。 解像度が低い場合は、2番目のボタンを押してテキストを少なくします。

またはテキストをオーバーフローさせます。ホワイトスペース：nowrap;

40pxの高さにすることはできません。デスクトップには大丈夫ですが、テキストはどこかに移動するか、オーバーフローで隠す必要があります。