Diemax-widthCSS Eigenschaft legt die maximale Breite eines Elements fest. Sie verhindert, dass derverwendete Wert derwidth-Eigenschaft größer wird als der durchmax-width angegebene Wert.

Probieren Sie es aus

max-width: 150px;

max-width: 20em;

max-width: 75%;

max-width: 20ch;

<section>  <div>    Change the maximum width.  </div></section>

#example-element {  display: flex;  flex-direction: column;  background-color: #5b6dcd;  height: 80%;  justify-content: center;  color: white;}

max-width überschreibtwidth, abermin-width überschreibtmax-width.

Syntax

/* <length> value */max-width: 3.5em;max-width: anchor-size(--my-anchor inline, 245px);max-width: calc(anchor-size(width) + 4em);/* <percentage> value */max-width: 75%;/* Keyword values */max-width: none;max-width: max-content;max-width: min-content;max-width: fit-content;max-width: fit-content(20em);max-width: stretch;/* Global values */max-width: inherit;max-width: initial;max-width: revert;max-width: revert-layer;max-width: unset;

Werte

<length>

Definiert diemax-width als absoluten Wert.

<percentage>

Definiert diemax-width als Prozentsatz der Breite des umgebenden Blocks.

none

Keine Größenbeschränkung der Box.

max-content

Die intrinsische bevorzugtemax-width.

min-content

Die intrinsische minimalemax-width.

fit-content

Nutzt den verfügbaren Platz, aber nicht mehr alsmax-content, d.h.min(max-content, max(min-content, stretch)).

fit-content(<length-percentage>)

Verwendet diefit-content-Formel mit dem angegebenen Argument anstelle des verfügbaren Raums, d.h.min(max-content, max(min-content, argument)).

stretch

Begrenzt die maximale Breite dermargin box des Elements auf die Breite seinesContainerelements. Es versucht, die Margin-Box den verfügbaren Platz im Containerelement ausfüllen zu lassen, verhält sich also in gewisser Weise ähnlich wie100%, jedoch wird die resultierende Größe auf die Margin-Box anstatt auf die Box angewendet, die durchbox-sizing bestimmt wird.

Hinweis:Um Aliase zu überprüfen, die von Browsern für denstretch-Wert verwendet werden, und um den Implementierungsstatus zu sehen, lesen Sie den AbschnittBrowser-Kompatibilität.

Barrierefreiheit

Stellen Sie sicher, dass Elemente, die mit einermax-width versehen sind, nicht abgeschnitten werden und/oder keinen anderen Inhalt verdecken, wenn die Seite vergrößert wird, um die Textgröße zu erhöhen.

• MDN Erklärung zu WCAG, Richtlinie 1.4 Erklärungen
• Erklärung zum Erfolgskriterium 1.4.4 | W3C Verständnis zu WCAG 2.0

Formale Definition

Formale Syntax

max-width =
none|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Beispiele

Maximale Breite in Pixeln festlegen

In diesem Beispiel wird das "child" entweder 150 Pixel breit sein oder die Breite des "parent", je nachdem, was kleiner ist.

HTML

<div>  <div>    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.  </div></div>

CSS

#parent {  background: lightblue;  width: 300px;}#child {  background: gold;  width: 100%;  max-width: 150px;}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• min-width
• width
• max-inline-size
• max-block-size
• box-sizing
• Einführung in das CSS-Boxmodell Leitfaden
• CSS-Boxmodell Modul