Beispiel:CSS-intrinsische-Abmessungen-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>intrinsische Abmessungen</title>
  <style>
.max-content {
  width: -webkit-max-content; /* Chrome */  
  width: max-content;  
}

.min-content {
  width: -webkit-min-content; /* Chrome */
  width: min-content;
}

.fit-content {
  width: -webkit-fit-content; /* Chrome */
  width: fit-content;
}
available  {
  width: available;
}
fill-available 	 {
  width: fill-available;
}
fit-content {
  width: fit-content;
}


h2 {
  background-color: #ffebe6 ;
  border-bottom: medium solid #c32e04;
}

p {
  background-color: #fffbf0;
  border: medium solid #dfac20;
}

p.hinweis {
 background-color: transparent;
 border: 0;
}

</style>
</head>
 
<body>
  <h1>intrinsische Abmessungen</h1>
 
  <h2>Überschrift</h2>
  <p>Überschriften und Textabsätze nehmen die Breite des Elternelements an.</p>
  
  <p class="max-content"><code>max-content</code> passt die Breite auf den verfügbaren Inhalt an.</p>
  <p class="min-content"><code>min-content</code> passt die Breite so an, dass das längste Wort die kleinstmögliche Breite bestimmt.</p>
  <p class="fit-content"><code>fit-content</code> passt die Breite auf den verfügbaren Inhalt an.<br>Bei schmaleren Viewports wird das Element angepasst und der Text umgebrochen</p>  
  
  <p class="hinweis">Ältere Versionen von Chrome und Safari unterstützen diese Schlüsselwörter mit vendor-prefix  <code>-webkit-</code>.</p>



</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-intrinsische-Abmessungen-1.html&oldid=82858“