A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/CSS/overflow-inline below:

overflow-inline - CSS | MDN

overflow-inline

Limited availability

Die overflow-inline CSS Eigenschaft legt fest, was angezeigt wird, wenn Inhalt über die Inline-Anfangs- und Endränder eines Kastens hinausgeht. Dies kann nichts, ein Scrollbalken oder der überschüssige Inhalt sein.

Hinweis: Die overflow-inline-Eigenschaft wird abhängig vom Schreibmodus des Dokuments auf overflow-y oder overflow-x abgebildet.

Syntax
/* Keyword values */
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;

/* Global values */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;

Die overflow-inline-Eigenschaft wird als ein einzelner <overflow> Schlüsselwortwert angegeben.

Werte
visible

Der Inhalt wird nicht abgeschnitten und kann außerhalb der Inline-Anfangs- und Endränder des Padding-Boxs gerendert werden.

hidden

Der Inhalt wird bei Bedarf abgeschnitten, um in die Inline-Dimension der Padding-Box zu passen. Es werden keine Scrollbalken bereitgestellt.

clip

Überfließender Inhalt wird an der Überlauf-Abschneidekante des Elements abgeschnitten, die mit der overflow-clip-margin-Eigenschaft definiert wird.

scroll

Der Inhalt wird bei Bedarf abgeschnitten, um in die Inline-Dimension der Padding-Box zu passen. Browser zeigen Scrollbalken an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird oder nicht. (Dies verhindert, dass Scrollbalken erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können dennoch überfließenden Inhalt drucken.

auto

Hängt vom Benutzeragenten ab. Wenn der Inhalt in die Padding-Box passt, sieht es aus wie visible, stellt aber dennoch einen neuen Block-Formatierungskontext her. Desktop-Browser bieten Scrollbalken, wenn Inhalt überläuft.

Formale Definition Formale Syntax
overflow-inline = 
visible |
hidden |
clip |
scroll |
auto
Beispiele Inline-Überlaufverhalten festlegen HTML
<ul>
  <li>
    <code>overflow-inline: hidden</code> (hides the text outside the box)
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: scroll</code> (always adds a scrollbar)
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: visible</code> (displays the text outside the box if
    needed)
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: auto</code> (equivalent to <code>scroll</code>
    in most browsers)
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: clip</code> (hides the text outside the box beyond
    the overflow clip edge)
    <code>clip</code>
    <div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>
CSS
div {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
#div5 {
  overflow-inline: clip;
  overflow-clip-margin: 2em;
}
Ergebnis Spezifikationen Browser-Kompatibilität Siehe auch

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4