Find the amount space occupied by the text in a div

Question

I'm trying to adjust the font-size based on how visually or pixelualy(if that's a word) long the text is.

No, I am NOT talking about the text.length of the variable. Uppercase and lowercase characters occupies different width on the <div>.

Because this div is fixed width the font-size must adjust depending on the entire visual length the text will occupy, the longer the text is, the smaller the font-size becomes.

Here in the screenshot, there are some text wrapping on the next line but let's ignore that and focus on a property that I can get for the nCount of length/pixel-width the entire text occupies? Like how many pixels wide is the entire string of text? If the text wraps to the next line then that property must still count onward.

For example, if the uppercase letter 'A' occupies 6px wide but a lowercase 'a' occupies 4px wide only. What would the be the word 'Web developer' 's total line width in pixels then?

How do you get that property inside an HTML element?

NOTE: I know that text.length can be used to some extent but it is not perfect as it doesn't account for the visual width of upper/lower cases but rather the character count only.

Might be worth looking into this https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container — Paras, Jul 09 '20 at 02:57
@Don'tPanic, upon briefly checking, the solution provided was about line-breaks and line-height. I have to say no, I'm looking for the opposite which is the horizontal length of the line but not the width of the parent container. — Shu Pesmerga, Jul 09 '20 at 03:06
Maybe you could clarify in your question, bcs that is not clear to me at all. Your screenshots show some text which wraps to 3 lines, which is (as I understood it) the condition for you need to adjust font size. — Don't Panic, Jul 09 '20 at 03:10
@Don'tPanic, about that 3 line-wrap. Yes, i tried to use ```text.length``` as a basis for the ```font-size```, very close but not perfect, the different case of the text sometimes messes up the scaling of the font based on my testing so I wonder of there is such property I can get inside the element. I'm also not referring to ```getBoundingClientRect()``` as it basically the width of the container. — Shu Pesmerga, Jul 09 '20 at 03:22
I still don't see what you're asking ... If the text fits on 1 or 2 lines, everything is OK, right? But if the text wraps to 3 lines, you need to adjust font size ... so let the text render at default size, count the number of lines after page load, and adjust if it is >= 3? — Don't Panic, Jul 09 '20 at 03:35
@Don'tPanic, I see your point. I haven't tried counting the line yet. Brb. — Shu Pesmerga, Jul 09 '20 at 03:37

StrayAnt · Accepted Answer · 2020-07-09T03:25:14.237

0

A simple solution with jQuery .css() function. Returns the css properties of HTML elements.. Link to more on .css()

<!DOCTYPE html>
<html>
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <title>Test</title>
</head>
<body>
    
    <span id="myText">A bunch of sample text</span>
    <br><br>
    <div id="display"></div>
</body>
<script type="text/javascript">

var spanPx = $('#myText').css('width');
document.getElementById('display').innerText = 'The span length is: '+spanPx;


</script>
</html>

edited Jul 09 '20 at 03:25

answered Jul 09 '20 at 03:19

StrayAnt

369
2
7

sorry i'm not referring about what the text/string is but the total width of pixels the string occupies. Updated my question. – Shu Pesmerga Jul 09 '20 at 03:30
Click the code snippet... It returns the pixel length of the span.. – StrayAnt Jul 09 '20 at 03:35
oh. right. I see it now. sorry. This is exactly what I'm looking for. Thanks! – Shu Pesmerga Jul 09 '20 at 03:39
1

No problem. Glad I could help. – StrayAnt Jul 09 '20 at 03:41
@ShuPesmerga you said the divs are of fixed width, so you already know the width, right? – Don't Panic Jul 09 '20 at 03:43
@Don'tPanic, Yes, I know the width of the container but the 'text span' inside the container will never be the same as the container width especially of the string of text is shorter. Also, I might undo StrayAnt 's answer if it turns out to be the width of the container rather than the span of the text. I'm still trying his solution if it's really the 'text span width' or the 'container width' – Shu Pesmerga Jul 09 '20 at 04:07
@Don'tPanic, yes. I already know the width of the container but I don't know yet how pixel-wide the text will be. Even if the text breaks to the next line, it will always be smaller than the container. Also, it turns out that this solution is not what i'm looking for. ```.css('width')``` turns out to be the computed width of the container and not the text-width. – Shu Pesmerga Jul 09 '20 at 04:21
is there any way without css – Musafiroon Sep 04 '21 at 12:50

Find the amount space occupied by the text in a div

1 Answers1