Quotation marks split from text when wrapping to a new line

AnkiMobile (iPhone/iPad) Help
1

I’m on version 2.0.83 and I recently noticed that when a piece of text is long enough to wrap to a new line the quotation marks sometimes end up on the wrong line.

imagen
imagen408×723 92.2 KB

2

You may try adding word-break: break-all; to the style of the quoted sentence.
If you don’t know how to, here is a quick tutorial, assuming you are already editing the note:

  1. Set the cursor in the field where the quoted sentence lie, then press Ctrl+Shift+x, or the HTML Editor button (the icon is </>). The background color, the police and the font should have changed, and you should also see the number of lines.
    Note that, in this mode, the usual linebreak tag (<br>) will not work as a linefeed (the special character inserted when you press Enter, usually denoted as \n, and that makes text go to next line), because the Anki’s editor maps Enter to <br>, which is the way HTML breaks lines. Concretely, this means that your whole text might end up in a single line. You can safely, in this mode, press Enter anywere to insert a linefeed, which will have no impact on the final result (it’s just eyecandy).
  2. Locate the quoted sentence, and wrap it with a <span> tag.
    Something like Example: QRS means “Send more slowly.” will become Example: QRS means <span>“Send more slowly”</span>.
  3. In the span tag, insert a style attribute whose content is the snippet I have given.
    The previous example will become Example: QRS means <span style="word-break: break-all;">“Send more slowly”</span>.

You can now try to preview the card, to see if this helped.

3

imagen
This is what I now have in the html view. Unfortunately that didn’t make the problem go away :frowning:

And this is what I have in my card styling:

.card {
 font-family: Helvetica Neue, Overpass, Noto Sans, Arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}

Could anything be added here to fix it on a global scale instead of card-by-card?

4

‘overflow-wrap: break-word’ is applied by default, so that content does not scroll off the screen. Your text appears to be a little too big to fit, so the quote character is being wrapped onto the next line - presumably the webview is not treating the quote as part of the word. I’m not sure there’s a way to make it wrap the word at the same time.