CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
user1373161
user1373161

Reputation:

html tag width on resize

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

Answers (3)

brianjhanson
brianjhanson

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

Vilas Kumkar
Vilas Kumkar

Reputation: 1400

I guess you need to remove 

"display: inline-block;"

Upvotes: 0

Devon B.
Devon B.

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

Related Questions