HTML CSS Text's Last Character Starts A New Line
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
- The text must be wrapped in case of a very long word
- The text might contain new lines
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
- → should I choose reactjs+f7 or f7+vue.js?
- → Phonegap Android write to sd card
- → Local reference jquery script in nanohttpd (Android)
- → Click to navigate on mobile devices
- → How to allow api access to android or ios app only(laravel)?
- → Access the Camera and CameraRoll on Android using React Native?
- → React native change listening port
- → What is the default unit of style in React Native?
- → Google play market autocomplete icon
- → Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`
- → Using Laravel with Genymotion
- → react native using like web-based ajax function
- → react native pdf View