How to justify text in Quarto?

Question

I would like to justify the text in a Quarto document. This means that it should automatically add text between words so that both edges of each line of text are aligned with both margins. In a word-document this would be the following highlighted symbol:

So I was wondering if this method is possible in a Quarto document? Here is a reproducible example:

---
title: "How to justify text in Quarto"
format: html
editor: visual
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

Quarto is based on Pandoc and uses its variation of markdown as its underlying document syntax. Pandoc markdown is an extended and slightly revised version of John Gruber's Markdown syntax. 

Markdown is a plain text format that is designed to be easy to write, and, even more importantly, easy to read:

Output:

---

As you can see the text is not justified, because the lines of text are not all at both edges of each line with both margins.

Answer 1

Since output format is HTML, all you need the CSS property text-align set as justify.

---
title: "How to justify text in Quarto"
format: html
engine: knitr
---

```{css, echo = FALSE}
.justify {
  text-align: justify !important
}
```

## Quarto

::: {.justify}

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

Quarto is based on Pandoc and uses its variation of markdown as its underlying document syntax. Pandoc markdown is an extended and slightly revised version of John Gruber's Markdown syntax and Markdown is a plain text format.

Markdown is a plain text format that is designed to be easy to write, and, even more importantly, easy to read:

:::

---

---

Answer 2

Complementing the answer by @shafee if you need to justify all the paragraph html elements, <p> without creating classes, like using :::{.justify} ::: you can use:

---
title: "How to justify text in Quarto"
format: html
engine: knitr
---

```{css}
#| echo: false
p {
  text-align: justify
}
```

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

Quarto is based on Pandoc and uses its variation of markdown as its underlying document syntax. Pandoc markdown is an extended and slightly revised version of John Gruber's Markdown syntax and Markdown is a plain text format.

Markdown is a plain text format that is designed to be easy to write, and, even more importantly, easy to read:

But if you need to justify specific elements use the answer by @shafee. For more information about text-align in css checkout https://developer.mozilla.org/en-US/docs/Web/CSS/text-align and the examples.