How to know the exact width of the string, as it would take in the Html before adding in dom?
The “width” of a string is an ambiguous notion. Do you mean: The number of bytes, the number of code points, the number of grapheme clusters, the number of pixels?
pixels to be specifiy
I believe the only way to know that in a browser is to actually show it to a user, at which point you can measure it.
Either way, that's an HTML question and not a JS language question.
Currently there is no way to know the same.Browser shows the final output or can inspect.
Issue arise when i wanted to make text-field dynamic? as per the size the text-field should adjust automatically.
That would be impossible as it involves languages outside of JS.
Depending on the use case it might have to render the string as content inside a DOM (HTML) and measure it after that element has been sized with CSS.
In other words there is no solution that can give you an accurate answer using only JS
But isn't is a wise choice to add up style utilities to address the dimension of any element on a browser with some inclusive of dynamic behavior.
Document create element, width, document append child. In that order.