How to justify abstract text in quarto?

Question

I'm currently writing a paper for academic purposes, and naturally, I added an abstract using the abstract option in the YAML header. I know you can use the following code (see below) to align the text in the quarto, but this doesn't seem to work with the alignment of the text in the summary itself. Is there a way to align this text?

{css, echo: FALSE}
.justify {
  text-align: justify
}

This reproducible example shows that the code above does not work for text within a YAML header.

---
title: "How to align the text of an abstract"
format: html
abstract: "Text can also be "centered", or symmetrically aligned along an axis in the middle of a column. This is often used for the title of a work, headlines, and for poems and songs. As with flush-right alignment, centered text is often used to present data in tables. Centered text is considered less readable for a body of text made up of multiple lines because the ragged starting edges make it difficult for the reader to track from one line to the next.Centered text can also be commonly found on signs, flyers, and similar documents where grabbing the attention of the reader is the main focus, or visual appearance is important and the overall amount of centered text is small. Some modern typesetting programs offer four justification options: left justify, right justify, center justify and full justify. These variants respectively specify whether the full lines of a paragraph are aligned on the left or the right, centered (edges not aligned), or fully justified (spread over the whole column width) . In programs that do not offer multiple kinds of justification, typically only left (for left-to-right languages) or right (for right-to-left languages) justification is provided."
editor:visual
---

This is the rendered HTML version

I looked for this particular feature in quarto guides and online forums, but couldn't find an answer. Thanks!

Answer 1

Use text-align: justify as the .abstract p CSS selector.

---
title: "How to align the text of an abstract"
format: html
abstract: |
  Text can also be "centered", or symmetrically aligned along an axis in the middle of a column. This is often used for the title of a work, headlines, and for poems and songs. As with flush-right alignment, centered text is often used to present data in tables. Centered text is considered less readable for a body of text made up of multiple lines because the ragged starting edges make it difficult for the reader to track from one line to the next.Centered text can also be commonly found on signs, flyers, and similar documents where grabbing the attention of the reader is the main focus, or visual appearance is important and the overall amount of centered text is small.Some modern typesetting programs offer four justification options: left justify, right justify, center justify and full justify. These variants respectively specify whether the full lines of a paragraph are aligned on the left or the right, centered (edges not aligned), or fully justified (spread over the whole column width). In programs that do not offer multiple kinds of justification, typically only left (for left-to-right languages) or right (for right-to-left languages) justification is provided.
css: style.css
---

style.css

.abstract p {
  text-align: justify;
}

---