How to limit the width of the tag <h1> - <h5> by the length of the content

Question

Thanks for taking the time to ask my question. I know this question has been asked and answered before, but somehow I can’t make it look like the expected one. I will show you some things that I have tried.

I have a div with a rounded border where I want to display the title (one of the standard captions -).

This is what I have:

HTML:

<div id="selectModel" class="admin_dropdown"> <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5> [...] </div> 

CSS

 h5.admin_caption { width: 300px; margin-top: -20px; margin-left: auto; margin-right: auto; background: white; } 

I am not allowed to post photos (<10 rep), so I hope jsfiddle works).

What it looks like: http://jsfiddle.net/vrP39/

I want this to look like this: http://jsfiddle.net/vrP39/1/

As you can see, the result of the last violin is achieved by changing the width until it matches the title. Of course, I want to use it with several headers of different lengths, so this is not an option.

What I have tried so far:

• Using the <span> around the text in my heading, also create a <span> element instead of <h5>
• display: inline-block or display: inline
• float: left in <h5> and clear:left in the next element

I saw this post (among others) here on stackoverflow ( Header Width (H1, H2, etc.) ), but nothing I tried seems to work.

What I did wrong? Any help is greatly appreciated, thanks in advance!

Answer 1

It looks like you are trying to reproduce the <fieldset> element. So why not use this element?

 <form> <fieldset> <legend>Wählen sie das anzuzeigende Model</legend> <select id="selectModelDDL" onchange="createTable(this);"> <option value="1">1</option> </select> </fieldset> </form> 

Using <fieldset> you will create a border around the elements, where <legend> is the text that is on the border.
Now you can just center the text:

 fieldset { text-align: center; border: 1px solid black; border-radius: 15px; font-weight: bold; font-size: 13px; padding: 10px; } 

jsFiddle

Answer 2

By working with your current code, you can do this: http://jsfiddle.net/vrP39/6/

Add a <span> inside h5 (for background color)

<h5 class="admin_caption"><span>Wählen sie das anzuzeigende Model</span></h5>

And for CSS

 h5.admin_caption { text-align:center; margin-top: -20px; } h5.admin_caption span { display:inline-block; background:#fff; padding:0 5px;} 

The first bit centers the text, and then we need to add a background to hide the black border line.

The span parameter must be set to inline-block , so we can add some indentation on the left and right, since you cannot do this if the span> element uses the default display:inline property.

Answer 3

You can also try wrapping the inscription in a div:

HTML:

 <div class="container"> <div id="selectModel" class="admin_dropdown"> <div class="caption_wrapper"> <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5> </div> <select id="selectModelDDL" onchange="createTable(this);"></select> </div> 

CSS

 div.caption_wrapper { margin: 0 auto; text-align: center; height: 1px; } h5.admin_caption { background: #FFF; display: inline-block; position: relative; top: -20px; margin: 0; } 

http://jsfiddle.net/vrP39/9/

Answer 4

Is this what you are looking for? http://jsfiddle.net/fatgamer85/33c4N/

  max-width: 30px; overflow: hidden; 

I gave the maximum width and hid the overflow to get the desired effect.