Search code examples
cssgoogle-chromearabiccustom-font

Why do Arabic text breaks into two lines sometimes?


I have seen this weird issue multiple times. For some reason, on Chrome, Arabic text sometimes breaks into two lines in the middle of a word. For example, this url: http://aitnews.com/?p=168010

Here's how it looks on Chrome: Chrome Screenshot

An here's how it's supposed to be (Firefox): Firefox Screenshot

I have no idea why this is happening. I think it's solvable using overflow but I would like to know the reason if possible.

Update: The issue seems to be related to word-wrap: break-word; in my css. Removing this line solved the issue. I'm still interested in knowing the reason however.


Solution

  • This CSS

    .entry-tags li a {
        white-space: nowrap;
    }
    

    Fixed the issue.