Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verwenden Sie das overflow-x-Attribut

青灯夜游
Freigeben: 2019-02-12 15:47:32
Original
5638 Leute haben es durchsucht

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;
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage