Heim > Web-Frontend > Front-End-Fragen und Antworten > So erzwingen Sie, dass HTML5-Text nicht umbrochen wird

So erzwingen Sie, dass HTML5-Text nicht umbrochen wird

WBOY
Freigeben: 2022-06-15 10:40:40
Original
4662 Leute haben es durchsucht

In HTML5 können Sie das Attribut „style“ zusammen mit dem Attribut „white-space“ verwenden, um den Text so festzulegen, dass keine Zeilenumbrüche erzwungen werden, und das Attribut „white-space“ wird verwendet, um den Stil des Elements festzulegen. Das Attribut wird verwendet, um anzugeben, wie mit dem Leerraum innerhalb des Elements umgegangen wird. Wenn der Attributwert „white-space“ auf „nowrap“ gesetzt ist, wird der Text nicht umgebrochen, bis er auf das Tag „
“ trifft, und die Syntax ist "".

So erzwingen Sie, dass HTML5-Text nicht umbrochen wird

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Wie erzwinge ich, dass HTML5-Text nicht umgebrochen wird?

Das Leerraumattribut gibt an, wie mit dem Leerraum innerhalb des Elements umgegangen wird.

  • normale Standardeinstellung. Leerzeichen werden vom Browser ignoriert.

  • pre Leerraum wird vom Browser beibehalten. Es verhält sich wie das

    -Tag in HTML. 
    Nach dem Login kopieren
  • nowrap Der Text wird nicht umgebrochen, der Text wird in derselben Zeile fortgesetzt, bis das Tag
    gefunden wird.

  • pre-wrap Behält Leerzeichensequenzen bei, wird aber normal umbrochen.

  • pre-line führt Leerzeichensequenzen zusammen, behält aber Zeilenumbrüche bei.

Das Beispiel sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
div{
width: 120px;
height: 60px;
line-height: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="white-space:nowrap">
This is some text. This is some text.
</div>
<div>
This is some text. This is some text.
</div>
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

So erzwingen Sie, dass HTML5-Text nicht umbrochen wird

(Freigabe von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erzwingen Sie, dass HTML5-Text nicht umbrochen wird. 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