Margins - how to set them for automatic new lines

Anki Help
3

I strongly advise against using linebreaks without semantic meaning. Purely visual customizations should be done with CSS.

The Basics

Both the body and the div are HTML elements. They have identifiers by which they’re selectable in CSS:

  • the body element has the class card which can be selected with a leading dot (.card)
    • the same class can be given to any number of elements
    • you could also use the HTML tag (body), but that’s a bit less specific - best would be to combine the two into a single selector: body.card
  • the highlighted div has an id: qa (question/answer) which would be selected with a leading hashtag (#qa)
    • an id should be a unique identifier for a single element, so there’s no need for div#qa

Styling

Now that we know what we can style, let’s apply some CSS to solve your issue:

#qa {
  max-width: 900px; // arbitrary
}

Why not target the body?

  • because we should apply size limits to the closest parent container of the text you want to restrict, which in Anki’s case is #qa - anything above in the HTML hierarchy would work too, but isn’t necessary and could have unwanted effects. Similar to the combined CSS-selector above, we want to be as specific as possible to achieve our goal.
2 Likes