I have a sentence field (Example) in every card.
In iOS app (and in the preview of MacOS app), the word (blossom) in the sentence get broken in the middle.
The sentence is placed in a div tag.
This is necessary to avoid the user needing to scroll left and right. Ideally the webview would break the words on word boundaries, but I don’t think it’s possible to do that but also handle situations where extremely long words are provided.
The default behaviour causes a scrollbar to appear if the word is too long and there’s no safe space to split it, which is why we use break-word. Ideally it would use a word boundary where possible, but it doesn’t seem smart enough to do that.
If it bothers you, you can adjust the styling in your card template:
div {
overflow-wrap: normal;
}
I add the overflow-wrap: normal setting, but it has no effect.
There is no very long word in my sentence.
Perhaps the sentence is separated by HTML entities that represent whitespace, such as , rather than pure whitespace characters. Try opening the card in Anki’s editor (Edit Current or Browser) and press Ctrl+Shift+X (maybe Command+Shift+X on Mac) on the Example field, or click the </> icon in the upper right corner of the field to enable HTML view and check to see if it contains HTML entities. If it contains HTML entities, replace them with pure whitespaces and it should work.
5 Likes
