html - Font discrepancies in various browsers, is there a solution to this? -

html - Font discrepancies in various browsers, is there a solution to this? -

i'm working on project height of content container limited, , on few select browsers (mostly chrome on android) text seems breaking in different places, though font properties seem identical, far i've checked:

width of container element font-size line-height font-family letter-spacing

all of identical, both in given , computed values.

this wouldn't massive problem, because of content container height constraint, these discrepancies causing me massive headache.

i've managed replicate problem in fiddle next code:

html

<p>we not able sleep or cannot sleep.</p>

css

p { font-family: "times new roman", serif; font-size: 11px; font-style: italic; letter-spacing: 0; max-width: 200px; }

the text in illustration renders on 1 line in bulk of browsers, in lastly word "sleep." appears on new line.

you can see screenshots of illustration in number of different browsers at:

http://www.browserstack.com/screenshots/cf75bb4fa9a22db2e660a0073698be86b55becb6

is there i'm missing here? there way ensure text render in same way accross number of devices , browers?

the details of font rendering vary browser , platform, , cannot controlled in css. besides, different computers may have (slightly) different fonts under same name, or e.g. lack times new roman exclusively (most smartphones lack it, example).

as workaround, if specific line partition crucial, consider writing text preformatted (i.e. dividing lines in html source way should appear in display) , using white-space: pre. drawback lines might nail or cross right border of area reserved element. if not set background or border, barely noticeable.

html css fonts