Heim > Artikel > Web-Frontend > Wie stelle ich ein, dass CSS-Text automatisch umgebrochen wird?
Wie stelle ich ein, dass CSS-Text automatisch umgebrochen wird?
- 云罗郡主Original
- 2018-11-09 15:31:356003Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Einrichtung des automatischen Zeilenumbruchs in CSS. Ich hoffe, dass er für Freunde hilfreich ist.
CSS3 enthält mehrere zusätzliche Funktionen:
1. Automatischer Zeilenumbruch
Es gibt die folgenden am häufigsten verwendeten Attribute in CSS3: [Empfohlenes Lernen:
CSS3-Tutorial
]1. TextüberlaufDie Textüberlaufeigenschaft bestimmt, wie nicht angezeigte Überlaufinhalte dem Benutzer signalisiert werden. Ein Beispiel für einen Textüberlauf ist unten dargestellt:
<html>
<head>
<style>
p.text1 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.text2 {
white-space: nowrap;
width: 500px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<b>测试1</b>
<p>
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
</p>
<b>测试2</b>
<p class = "text1">
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台！
</p>
<b>测试3</b>
<p class = "text2">
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精客家话通，一站式php自学平台！
</p>
</body>
</html>2. Zeilenumbruch:
Zeilenumbruch wird verwendet, um Zeilen zu unterbrechen und in die nächste Zeile umzubrechen. Der folgende Code enthält Beispielsyntax:
p {
word-wrap: break-word;
}Der folgende Code zeigt Beispielcode für die Silbentrennung:
Es sieht so aus:
<html>
<head>
<style>
p.text1 {
width: 140px;
border: 1px solid #000000;
word-break: keep-all;
}
p.text2 {
width: 140px;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<b>测试1</b>
<p class = "text1">
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台
</p>
<b>测试2</b>
<p class = "text2">
php中文网提供大量免费、原创、高清的php视频教程，并定期举行公益php培训！可边学习边在线修改示例代码，查看执行效果！php从入门到精通，一站式php自学平台
</p>
</body>
</html> Der Anzeigeeffekt ist wie folgt: 
Das obige ist der detaillierte Inhalt vonWie stelle ich ein, dass CSS-Text automatisch umgebrochen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!