Подгонять ширину div к содержимому, а не к родительскому

Question

Я хочу сделать ярлык для кнопки, которая у меня есть. Моя проблема в том, что метка шире, чем кнопка. В настоящее время я сделал это так (простой пример):

<div class="parent_container_the_icon">
    <div class="label">
        This is the label text
    </div>
<div>

CSS:

.parent_container_the_icon {
    height: 50px;
    width: 50px;
    float: left;
}

.label {
    display: block;
    position: absolute;
    white-space: nowrap;
}

Я хочу, чтобы метка принимала ширину самого текста метки без переноса текста. На данный момент он не переносит текст, но я получаю переполнение текста в поле метки, так как это поле занимает только максимальную ширину контейнера.

Как я могу заставить ярлык div соответствовать размеру текста и не наследовать ширину родительского?

Answer 1

Я думаю, у вас было именно то, что вы хотели. Возможно проверить в другом браузере?
Это ваш код: jsfiddle

Answer 2

HTML:

 <div class="parent_container_the_icon">
      <div class="label">
           This it the label text
      </div>
 <div>​

CSS:

.parent_container_the_icon {
    height: 50px;
    min-width: 50px; /*<== changed width to min-width*/
    float: left;
}

.label {
    /*removed position:absolute*/
    display: block;
    white-space:nowrap;
}

Answer 3

Ты можешь использовать white-space: nowrap; свойство в родительском классе и width: 100%; у ребенка.

Я надеюсь, что вы найдете это полезным.