How to get the correct CSS width of the parent container when text overflows outside the container (happens with most italic fonts)?

Question

Happy way

The image below is a happy path where the text does not appear outside the parent element:

> $('#myContainer').width();
462

Text overflow

When you go to make the font italic, the text appears outside the parent container. The problem is that I need text that is completely contained in the parent element (orange box), or should be able to get the full width of the parent, including the text overflow on the right side of the window:

> $('#myContainer').width();
462

How can I do that? I don’t want to trim the text, so using the CSS property text-overflowdoes not help me.

Here is the fiddle that shows the problem:

• https://jsfiddle.net/troygrosfield/7qwx5h9m/

UPDATE: Aguafina Script ' :

Answer 1

5px (?) .