Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Eigenschaften/Größenangaben/intrinsische Abmessungen

Aus SELFHTML-Wiki
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
  • Edge
  • Firefox
  • 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.


intrinsische Abmessungen ansehen …
.max-content {
  width: intrinsic;           /* Safari/WebKit verwendet einen nicht standardisierten Namen */
  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 an 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.

intrinsische Abmessungen ansehen …
.min-content {
  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.


intrinsische Abmessungen ansehen …
.fit-content { 
  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.
Beachten Sie: Langfristig soll das Schlüsselwort fit-content wieder aus dem Standard enfernt werden.
Verwenden Sie deshalb die gleichnamige Funktion fit-content(Maximallänge).

Weblinks[Bearbeiten]