Text overflow has no break rules?

Anki Card Design
1

The text in my cards isn’t doing a line break on spaces when it overflows to a new line. I’ve tried putting everything in a div and setting all: unset; to see if I can get this to work but nothing I’ve done seems to produce the correct rendering.

undesirable rendering
undesirable rendering1074×654 25.2 KB

.card {
    font-family: Times, serif;
    font-size: 20px;
    text-align: justify;
    color: black;
    background-color: white;
    text-indent: 1em;
}
.replay-button {
    margin: 0px;
}
.replay-button svg {
    width: 25px;
    height: 25px;
}
.card-tags {
    font-style: italic;
    font-size: 15px;
    padding-top: 10px;
    padding-left: 10px;
}

In the example it would be better to not have the words cut off when overflowing to a new line.

2

I couldn’t reproduce this (perhaps you are using some addon that alters styles, or a different version of Anki), but the main properties for such a case are overflow-wrap, white-space, and hyphens.

1 Like
3

Thank you for letting me know this. It turns out some of the data was input into Anki with improper (and non visible) formatting information. This also caused cloze deletions to fail to parse.

2 Likes
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.