Preventing word breaks in <code>

AnkiMobile (iPhone/iPad)
1

I use <code> in some programming cards. My style is as follows:

code {
  padding: 0 3px;
  border-radius: 2px;
  font-family: "Hack", monospace;
  white-space: pre;
  color: #4d4d4c;
  background-color: #d6d6d6;
}

Unfortunately, on AnkiMobile (but not on desktop) I get unwanted word breaks, as in the following screenshot.

image
image1125×2436 106 KB

I tried adding word-break: keep-all; to the style with no success. I’m not very knowledgeable about html or css, but I’m not sure that this is really the issue. On desktop, no matter how I resize the preview window, the words never get broken like this.

Also I just got an iPhone and AnkiMobile for the first time, so I’m not sure if it always was like this. I was previously using AnkiDroid and I had no such issue.

So any advice or workaround will be greatly appreciated. Thanks.

2

overflow-wrap is set to break-word by default, so that you don’t need to scroll left and right to read the text.

3

Thank you. Simply adding overflow-wrap: normal; fixed the issue for me.

image
image1125×2436 105 KB

(I also changed the colors, please ignore this difference)