How to locate the center of the text inside the html element

Question

Let's say I have the div element, inside which there is some text. Is it possible to figure out the length of the text itself? Quite often the length of the div is a lot bigger than the length of the text inside? Here is the image of such div.

The pure javascript solution to that would be great!

What have you tried so far? Please provide some html. Are you using jQuery? — David Laberge, Dec 03 '14 at 17:42
use display:inline-block; (which will size to container to just the size of the text) and get the size of that element in JS. — frenchie, Dec 03 '14 at 17:42
Are you just looking to shrink the div container to match its contents? — j08691, Dec 03 '14 at 17:43
no, I want to have the coordinate of the center of the text for my js library. — ganqqwerty, Dec 03 '14 at 17:45
I'm writing the library that will draw an SVG-arrow from one html element to another. — ganqqwerty, Dec 03 '14 at 17:47
can't measure text itself but you can replicate it's width by copying the text to another element offscreen that has similar padding, font-size etc — charlietfl, Dec 04 '14 at 05:20

score 1 · Accepted Answer · edited May 23 '17 at 10:33

Welp, your div is a block element, so if you use Javascript to get the width, it will be of the entire div. I would recommend wrapping your inner text with <span> (inline elements) then look at the width of the span.

<div><span id="foo">Lorem ipsum</span></div>
<script>var width = document.getElementById('foo').offsetWidth;</script>

BTW, I just copied the code from How do I retrieve an HTML element's actual width and height?.

score 1 · Answer 2 · answered Dec 03 '14 at 18:04

Try this to get the length of text inside div

<html> 
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
 </script>
  <script>
    $(document).ready(function (){
      if ($('#test').text().length > 0) 
       alert($('#test').text().length);
    });
  </script> 
  </head> 
  <body> 

    <div id='test'>28</div>


  </body>
  </html>

How to locate the center of the text inside the html element

2 Answers2