Applies to:

  • CSS
  • HTML
What?
A quick article on how to get a div layer to increase height based on how a heading fits on a page.

What?
I have a heading like this:
The heading in full width
The code of this is:
<div id="page-title" class="col-xs-12">
	<h1><a href="/">A long heading that wraps over several lines</a></h1>
</div>

When I shrink the browser, I get a heading like this:
The heading in narrow width (text overlap)

I want this to happen:
The heading in narrow width (fixed)
The code of this is the addedn overflow:hidden;height:1%;:
<div id="page-title" class="col-xs-12" style="overflow:hidden;height:1%;">
	<h1><a href="/">A long heading that wraps over several lines</a></h1>
</div>

Source(s):

Add comment


Send