How to get the width of the text inside an H1 tag?

Question

Yes, this is most probably a duplicate, but please read my problem first before marking it down as such.

After two hours of searching, I'm getting really frustrated on this. I've tried the following:

• Used jQuery's $("#this").width() method. It returns a value close to my screen's width.

• Used JavaScript's this.offsetWidth method. The same happens.

• Set display: inline as the style for the h1 and tried the first two methods. Didn't work. The same values are returned.

• Set display: inline-block and tried. No luck.

• Set padding and margins to 0. Unwanted result again.

• Tried getting the value with innerWidth. Still the same.

• Switched h1 with p and requested the value. No change. (And applied styles too)

Currently, I'm thinking of replacing all headings with disabled buttons but same styles, yet, this will be very inconvenient and will interfere a bit with the animations on the page.

What I'm trying to achieve is centre alignment for the heading. I know I can set position: relative, but then there will be trouble while vertically positioning the heading.

A little HTML:

    <h1 class="preload" id="interactor"> Hi!</h1>
    <h1 id="screenWidth"></h1>

In CSS:

h1.preload  {
    position: absolute;
    top: -20%; /* later gets animated */
    display: inline;
}

JavaScript:

    //just testing
    var sW = window.innerWidth;
    document.getElementById("screenWidth").innerHTML = sW;
    document.getElementById("interactor").innerHTML = $("#interactor").width();

EDIT: I tried the inline method again. Did not work. But, I discovered this: When I used jQuery's css method to set display: inline, the value was properly returned (45 in my case), but doing so in the CSS file doesn't work. The element does get selected though, as font and color modifications are visible.

The question is slightly confusing - could you provide some of your html so we can see what you're working with? — OliverRadini, Nov 18 '15 at 14:04
Just curious...why do you need to know the width of the *text node* and not the "parent" element that surrounds it? — Paulie_D, Nov 18 '15 at 14:07
https://jsfiddle.net/4m2t1b2q/ setting display to inline works — Miroslav Saracevic, Nov 18 '15 at 14:07
Duplicate? - http://stackoverflow.com/questions/5318612/calculate-width-of-text-node-in-a-block-level-element-using-jquery — Paulie_D, Nov 18 '15 at 14:08
@Paulie_D Edited. BTW, I'm not using any divs, the parent of this h1 is the body of the page. — Vedaant Arya, Nov 18 '15 at 14:30

score 0 · Accepted Answer · answered Nov 18 '15 at 14:10

here: it works fine if you have display: inline-block

$(function(){
  $h1 = $("h1");
  $("#result").text("width:"+$h1.width()+"px - inner width"+$h1.innerWidth()+"px");
});

h1{
  display:inline-block;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Foo Bar</h1>
<p id="result"></p>

score 0 · Answer 2 · answered Nov 18 '15 at 14:10

0

Give us your html and we'll see. $( "h1" ).width(), if H1 is not manipulated, is always 100% of his container, because it's a display-block element. It's like $( "div" ).width() and all other display-block elem.

HTML

<h1 id="normal">TEST</h1>
<h1 id="inline" style="display: inline">TEST2</h1>

JS

alert( $( "#normal" ).width() );
alert( $( "#inline" ).width() );

The first alert will be "full container" (544 for me) and the second a smaller one (98 for me)

Look HERE

answered Nov 18 '15 at 14:10

RiccardoC

876
5
10

Hmm... Seems to work. Then what could be the problem with my code? – Vedaant Arya Nov 18 '15 at 14:32
Your code is very small and incomplete. The mistake can be everywhere... Try to put more of your real html and real js. It can be someghing VERY simple, like forgot to include js library. Remember that, with most browser, a single js error, will stop all js execution – RiccardoC Nov 18 '15 at 14:39
Still a problem though: doesn't work with external CSS. It works when I put the code like:
Text
– Vedaant Arya Dec 24 '15 at 18:51

How to get the width of the text inside an H1 tag?

2 Answers2

Text