UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Example URL:
https://jsfiddle.net/o1x8owre/1/

Steps to reproduce the problem:
1. Use Roboto from Google Fonts

We are using Roboto latin and latin-ext at font weight 700 from Google Fonts.

2. Combine just the right CSS

Using latin-ext inside a block-level element with textContent:

<p>Pohádkový příběh Velšanů nekončí, dnes vyřadili Belgii a o finále vyzvou Portugalce</p>

and CSS styling:

p {
    font-family: Roboto;
    font-size: 24px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 242px;
}

3. Chrome outputs ellipsis in the middle of the element

Using only latin characters, we cannot reproduce this.

What is the expected behavior?
I would expect Chrome to break the line, not insert ellipsis.

What went wrong?
There is an ellipsis on the second line out of five.

Example:

https://jsfiddle.net/o1x8owre/1/

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.106  Channel: stable
OS Version: Xubuntu
Flash Version: Shockwave Flash 22.0 r0