Trying to figure out the width of a text-only div seems more complicated than expected. The value returned doesn't match what is shown in the Google Chrome Developer panel. I've searched online for answers, but all I find are solutions related to outerWidth, innerWidth, and padding/margin issues. I don't think that's my problem, but please correct me if I'm mistaken. Below are the relevant HTML, CSS, and JS snippets. Apologies if this is a basic question; I've tried troubleshooting on my own. All width functions give the same result (even in vanilla JS), with varying values depending on the length of text in the div. Happy to offer more info if needed!
HTML:
<div class='goal-cont'>
<div id='goal-bar'>
<div id="goal-progress"></div>
<div id='title'></div>
<div id='progress-text'>
<span id='goal-current'>0</span>/<span id='goal-total'>0</span>
</div>
</div>
<!--<div id='goal-end-date'></div>-->
</div>
CSS:
#title {
font-family: 'Montserrat';
font-weight: 800;
font-style: italic;
font-size: 25px;
position: absolute;
top: 25px;
//left: 20px;
transform: translateY(-50%);
}
JS:
$('#title').html(obj.detail.title);
console.log($('#title').width());
For visuals, here are links to the differences I'm seeing:
Chrome Displayed Width: https://i.sstatic.net/bZkVW.png
JQuery Calculated Width: https://i.sstatic.net/UUfOW.png