I am using Quarto to create slides with reveal.js. When a title slide is long, I want it to be in a smaller font size, plus other changes. I thought of creating a class to modify the heading when it was too long, but I am not able to apply the class. This what I have in my custom.css
file:
.longtitle{
font-size: 0.7em;
}
This is my qmd code:
---
title: test
format: revealjs
self-contained: true
css: custom.css
---
## Short title
- Item
## Very very long title that goes in two lines
- Item
<h2 class="longtitle">Try to apply the "longtitle" class</h2>
- Not working
This is because your css
gets overwritten by the .reveal h2
styles. Instead, a possibility is to use a span
. The css
can stay as it is and we use
## [Try to apply the "longtitle" class]{.longtitle}
what defines a span
which has the longtitle
class, where the span
is located inside an h2
, so that it is in particular inside a suitable header.
.longtitle {
font-size: 0.7em;
}
---
title: test
format: revealjs
self-contained: true
css: custom.css
---
## Short title
- Item
## Very very long title that goes in two lines
- Item
## [Try to apply the "longtitle" class]{.longtitle}
- Working