suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie das overflow-x-Attribut

So verwenden Sie das overflow-x-Attribut

青灯夜游
青灯夜游Original
2019-02-12 15:36:565625Durchsuche

Das Attribut overflow-x wird verwendet, um anzugeben, ob der linke/rechte Rand des Inhalts abgeschnitten werden soll, wenn das Element über den Inhaltsbereich hinausläuft.

So verwenden Sie das overflow-x-Attribut

CSS3 overflow-x-Attribut

Funktion: overflow-x-Attribut Gibt an, ob die linken/rechten Ränder des Inhalts abgeschnitten werden sollen, wenn dieser über den Inhaltsbereich des Elements hinausgeht.

Tipp: Verwenden Sie die Eigenschaft overflow-y, um zu bestimmen, ob die Ober- und Unterkante abgeschnitten werden.

Syntax: 

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

sichtbar: Der Inhalt wird nicht zugeschnitten und kann außerhalb des Inhaltsfelds angezeigt werden.

versteckt: Beschnittener Inhalt – kein Scrollmechanismus vorhanden.

Scrollen: Schneidet den Inhalt zu – bietet einen Scrollmechanismus.

auto: Für den Fall, dass die Box überläuft, sollte ein Scrollmechanismus vorhanden sein.

keine Anzeige: Wenn der Inhalt nicht in die Inhaltsbox passt, entfernen Sie die gesamte Box.

no-content: Den gesamten Inhalt ausblenden, wenn er nicht in das Inhaltsfeld passt.

Hinweis: overflow-x-Attribut funktioniert in IE8 und früheren Browsern nicht richtig.

Verwendungsbeispiel des CSS3-Overflow-X-Attributs

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
</head>
<body>

<div><p style="width:140px">
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p></div>

<p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
<p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>

</body>
</html>

Rendering:

So verwenden Sie das overflow-x-Attribut

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das overflow-x-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie das Attribut „border-image-width“.Nächster Artikel：So verwenden Sie das Attribut „border-image-width“.

In Verbindung stehende Artikel

Mehr sehen