CSS/Eigenschaften/Größenangaben/intrinsische Abmessungen

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Größenangaben(Weitergeleitet von Max-content)
Wechseln zu: Navigation, Suche

Im CSS basic box model wurden für Größenangaben neben festen und prozentualen Werten auch die Schlüsselwörter max-content, min-content, available, fit-content, border-box und content-box hinzugefügt. Diese Schlüsselwörter bewirken intrinsische Abmessungen, die sich nach dem Inhalt und nicht nach externen Festlegungen richten.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Schlüsselwörter[Bearbeiten]

max-content[Bearbeiten]

Das Schlüsselwort max-content passt die Breite so an, dass der Inhalt den maximal möglichen Raum einimmt.


Beispiel: intrinsische Abmessungen ansehen …
.max-content {
  width: intrinsic;           /* Safari/WebKit verwendet einen nicht standardisierten Namen */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */  
  width: max-content;  
}
Der Textabsatz nimmt ohne weitere Festlegung die gesamte verfügbare Breite des Elternelements an.
Mit dem Schlüsselwort max-content wird die Breite aan den verfügbaren Inhalt angepasst.
Beachten Sie: Falls der Inhalt und damit die Breite höher als die verfügbare Breite ist, kommt es zu keinem Zeilenumbruch, sondern der überstehende Teil verschwindet aus dem Viewport.
Verwenden Sie hier das Schlüsselwort fit-content.


min-content[Bearbeiten]

Das Schlüsselwort min-content passt die Breite so an, dass der Inhalt den kleinsten möglichen Raum einimmt. So bestimmt das längste Wort, bzw. Kindelemenent die Breite des Elements.

Beispiel: intrinsische Abmessungen ansehen …
.min-content {
  width: -moz-min-content;    /* Firefox */
  width: -webkit-min-content; /* Chrome */
  width: min-content;
}
Der Textabsatz nimmt ohne weitere Festlegung die gesamte verfügbare Breite des Elternelements an.
Das Schlüsselwort min-content passt die Breite so an, dass der Inhalt den kleinsten möglichen Raum einimmt. So bestimmt das längste Wort, bzw. Kindelemenent die Breite des Elements.

fit-content[Bearbeiten]

Das Schlüsselwort fit-content passt die Breite an den verfügbaren Inhalt an. Falls der Inhalt und damit die Breite höher als die verfügbare Breite ist, kommt es zu einem Zeilenumbruch, sodass der Inhalt immer sichtbar ist.


Beispiel: intrinsische Abmessungen ansehen …
.fit-content {
  width: -moz-fit-content;    /* Firefox/Gecko */
  width: -webkit-fit-content; /* Chrome */  
  width: fit-content;  
}
Der Textabsatz nimmt ohne weitere Festlegung die gesamte verfügbare Breite des Elternelements an.
Mit dem Schlüsselwort fit-content wird die Breite an den verfügbaren Inhalt angepasst.


Weblinks[Bearbeiten]