HTML CSS Text's Last Character Starts A New Line

- 1 answer

I'm having a problem where I need a div to grow according to the text that's inside it. The text is from a user's input so its dynamic and can contain new lines. So to sum it up:

  • The div mustn't have width:100%
  • The text must be wrapped in case of a very long word
  • The text might contain new lines

A simple white-space: pre-wrap; and word-break: break-word; did the trick in most cases but the problem is that with some fonts (I'm using ionic so android uses 'Noto Sans Hebrew') the last character starts a new line.

I was able to narrow down the problem and create this pen

I guess it might be an unexpected width of some characters, can anyone think of a fix or a workaround?



It turns out its an issue with that specific fonts. Somehow the characters' width isn't calculated correctly and most sentences end up with less width than they need.

Changing the font to OpenSans Hebrew (which looks the same) resolved this issue for me