Beispiel:Größenangaben-4.html
<!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:Grundlayout.css">
<title>intrinsische Größen - 2</title> <style>
.max-content { width: max-content; }
.min-content { width: min-content; }
.fit-content { width: fit-content; }
h2 { background-color: #ffebe6 ; border-bottom: medium solid #c82f04; }
p { background-color: #fffbf0; border: medium solid #dfac20; padding: 0.25em; }
p.hinweis {
background-color: transparent; border: 0;
}
.demo-box { resize: horizontal; overflow: auto; max-width: 55rem; border: thin dotted; padding: 1rem; }
</style> </head>
<body>
max-content passt die Breite auf den verfügbaren Inhalt an.
Kein automatischer Zeilenumbruch!
min-content passt die Breite so an, dass das längste Wort die kleinstmögliche Breite bestimmt.
fit-content passt die Breite auf den verfügbaren Inhalt an.
Bei schmaleren Viewports wird das Element angepasst und der Text umgebrochen
</body> </html>
