Beispiel:CSS-clamp-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Zitat mit flexibler Schriftgröße</title>
<style>
blockquote {
font: 1.2em/1.4 Georgia, serif;
font-size: clamp(1.2em, 4vw, 1.8em);
max-width: 28em;
}
blockquote p {
font-style: italic;
margin: 0;
}
blockquote footer {
margin-top: 1em;
font-size: 0.8em;
}
blockquote cite {
font-style: inherit;
}
</style>
</head>
<body>
<h1>Zitat mit flexibler Schriftgröße</h1>
<blockquote lang="de">
<p>Das wiegt alles auf: Daß wir uns gewöhnen, ruhig zu schlafen. Daß wir aus dem vollen leben, als gäbe es übergenug von diesem seltsamen Stoff Leben.</p>
<p>Als könnte er nie zu Ende gehen.</p>
<footer>
(<cite>Christa Wolf, „Der geteilte Himmel“</cite>)
</footer>
</blockquote>
</body>
</html>