Max-width CSS voor maximale breedte kader of tekst
De eigenschap max -width wordt gebruikt om de maximale breedte van een bepaald element in te stellen. Het voorkomt dat de gebruikte waarde van de breedte-eigenschap groter wordt dan de waarde die is opgegeven voor max -width.
Voorbeeld max-width en CSS
In dit voorbeeld heeft het “kind” < – div – > zijn breedte-eigenschap zo ingesteld dat het de volledige breedte van de ouder gebruikt, maar de eigenschap max-width beperkt zijn breedte tot 150px.
<div id="parent">
<div id="child">
The Mozilla community produces a lot of great software.
</div>
</div>
#parent { width: 300px; }
#child { background: gold;
width: 100%;
max-width: 150px;
}
max-inline-size definitie en gebruik
De CSS eigenschap max-inline-size lijkt sterk op de CSS eigenschappen max-height en max-width, maar de eigenschap max-inline-size is afhankelijk van de inline-richting.
De max-inline-size eigenschap bepaalt de maximale grootte van een element in de inline-richting.
Indien de inhoud kleiner is dan de maximale grootte in inline-richting, heeft de max-inline-size eigenschap geen effect.
Indien de inhoud groter is dan de maximale grootte in blokrichting, wordt de waarde van de eigenschap max-inline-size toegepast.
Opmerking: De verwante CSS eigenschap writing-mode definieert de inline richting, en dit beïnvloedt het resultaat van de max-inline-size eigenschap. Voor Engelstalige pagina’s is blokrichting naar beneden en inline-richting van links naar rechts.
See the Pen Logical properties example by web.dev (@web-dot-dev) on CodePen.