Quarto inline fragments that don't break into boxes

Question

In a Quarto presentation I'm trying to change the color of a portion of text inside of a single line, and in such a way that the fragments appear one after the other. Here is my QMD file so far:

---
title: "Mathematical Reasoning"
format: revealjs
incremental: true
---

:::: {.fragment}

Consider the following paradoxes.  

::: {.inline-fragment}
<span style="color:gray">(or just curiosities)</span>
:::

::::

with the following added to reveal.css

.inline-fragment {
  display: flex;
}

inspired by this answer to a related question: Using quarto and revealjs how can I have one word appear on a line on a slide?

(The reveal.css file is auto-generated by Quarto when a presentation is first rendered. The full file is so long that I'm not able to include it here due to the character limit -- it's a very large file. But for that reason I can't provide a complete working example of what I'm describing, so I have just describe that the above CSS is added to this auto-generated file.)

However, in my use case, this cases the stuff in the first fragment to line-break and form a text box. The second fragment then doesn't render inline but instead in its own box next to the first box.

I'd appreciate if anyone knows how to make these fragments render as if they were written in a single line.

Answer 1

You can use [your-text]{.fragment style="your-css"} like this:

---
title: "Mathematical Reasoning"
format: revealjs
incremental: true
---

Consider the following paradoxes. [(or just curiosities)]{.fragment style="color: gray;"}