Search code examples
cssgoogle-chromeline-breaks

HTML Label word-break in Chrome

after updating the Google Chrome to the latest version, all the labels in my HTML documents have unwanted word-breaks. take a look at this fiddle: http://jsfiddle.net/hc9avcd3/

this is how it should be (screen shot from older version of chrome):

enter image description here

although the grey div has width: 100% and the label has width: auto, but this is how it looks on chrome (screen shot from new version of Chrome):

enter image description here

  • there's no problem with ltr and english labels.

  • tables and <p> elements also have this problem.

how can I fix the problem? I also get ERR_CACHE_MISS error each time I open the documents.

And I have no extensions or add-ons enabled.

Solution

  • This seems to be a bug in the layout algorithms in Chrome for right-to-left text in floated elements. This does not depent on the direction settings; if you remove direction: rtl, the text still wraps in Chrome. The inherent directionality of Arabic letters still causes right to left layout, and this somehow makes Chrome divide the text into two lines even when it would nicely fit on one line.

    The problem can be reduced to a simple case that has just a p element floated:

    body {
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
}
p {
    float: right;
}
    <p>
    سلام سلام سلام سلام سلام سلام سلام
</p>

    In other browsers, the text shows on one line. In Chrome, it gets split. Mysteriously, this depends on the font size. If you change it to 15px, the text is not split.

    To circumvent the bug, don’t use floating. In the given case, it is probably sufficient to set the content of the div element right-aligned:

    body {
    margin: 0px;
    font-size: 14px;
    font-family: Tahoma, Geneva, sans-serif;
}
div {
    padding: 5px;
    text-align: right;
    background-color: #E7E7E7;
}
    <div>
    <label>سلام سلام سلام سلام سلام سلام سلام</label>
</div>