Match div width for content, not parent

Question

I want to make a shortcut for the button that I have. My problem is that the shortcut is wider than the button. Currently, I have done it like this (simple example):

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

I want the label to take the width of the label text itself without wrapping the text. At the moment, it does not wrap the text, but I get an overflow of text in the label field, since this field takes up the maximum width of the container.

How can I make the div label fit the size of the text and not inherit the width of the parent?

Answer 1

I think that you had exactly what you wanted. Perhaps check in another browser?
This is your code: 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

You can use the white-space: nowrap; property white-space: nowrap; in the parent class and width: 100%; for child element.

I hope you find this helpful.