Reputation:
I am using h2 tag for heading in bootstrap. i have something below structure
<div id="id2">
<header>
<div class="hideshow1"> Toggle this div </div>
<div class="hideshow2"> Toggle this div </div>
<h2> My Header very long </h2>
</header>
<div class="body1">
This is my body
</div>
</div>
what happens is when i resize window then my h2 tag does not display properly it just come down and display in another section in short it is messy.
What i would like to do is when there is no enough space for h2 then it should just display how many char fit in the space. something like my header...
below is my css for h2
#id2 > header h2 {
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 100%;
letter-spacing: 0;
line-height: 34px;
margin: 0;
position: relative;
width: auto;
}
It does not seem to work.. if any CSS expert could share some info.
Thank you
Regrads, Mona
Upvotes: 0
Views: 70
Reputation: 206
There are a few things you'll have to do to get this working. Your header will have to be set to display: block
rather than display: inline-block
, then you'll need to set overflow: hidden
on the header as well as text-overflow: ellipsis
.
Here's a sample jsfiddle
EDIT: added a better jsfiddle link
Upvotes: 1
Reputation: 11
text-overflow:ellipsis;
will do that for you if the text does not fit in the element. However, h2 will stretch to fit the text by default, so you should also set a max-width so your h2 doesn't become too wide.
Upvotes: 1