Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > HTML-Tutorial > Wie kann ich den Pre-Tag-Wrap automatisch durchführen?

Wie kann ich den Pre-Tag-Wrap automatisch durchführen?

黄舟

Freigeben： 2017-07-08 11:52:12

Original

4394 Leute haben es durchsucht

Der Inhalt im Tag

 wird automatisch umbrochen und entspricht den W3C-Standards (Unterstützung für mehrere Browser). </p>
<p>Standardmäßig wird der Inhalt im Tag <pre /> Wenn der Zeilenumbruch den Bereich überschreitet, erfolgt automatisch ein Zeilenumbruch, was zu Problemen beim Anzeigen oder Drucken führen kann. </p>
<p>Das Folgende stellt Code im CSS-Stil bereit, der den W3C-Standards entspricht und mehrere Browser unterstützt: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">pre{white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}

Nach dem Login kopieren

Das Pre-Tag behält das Format des HTML-Inhalts unverändert bei, jedoch mit der gleichen Breite Wenn die Seite zu groß ist, wird sie unterbrochen. Zur Abhilfe ist ein automatischer Zeilenumbruch erforderlich:

Wrapping the pre tagMaking preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let&#39;s you use the pre tag to keep the formatting, 
without cursing yourself when some of the content is too long and doesn&#39;t wrap:
pre {white-space: pre-wrap;      
white-space: -moz-pre-wrap; 
white-space: -pre-wrap;     
white-space: -o-pre-wrap;   
word-wrap: break-word;      
}

Nach dem Login kopieren

Fügen Sie am besten ein DIV zum übergeordneten Tag hinzu und legen Sie das CSS-Attribut fest 🎜>: Zeilenumbruch: Zeilenumbruch; Leerzeichen: normal; Stilschrift direkt verwenden:

<pre   
style="width:30px;word-break:   
break-all;   
word-wrap:break-word;border:1px   
solid  #555">    
asfasdfas    
dfasd    
fa    
sdfasdf

Nach dem Login kopieren

Der vorformatierte Ausgabecode wird im Artikel verwendet. Standardmäßig erzwingt der Browser, dass der Inhalt in pre ohne Zeilenumbrüche ausgegeben wird. In diesem Fall wird es so aussehen, als würde sich der Code mit zunehmender Größe über die Seite hinaus erstrecken. Vorher habe ich absichtlich Zeilenumbrüche im Code erzwungen ... Ich bin müde. Heute habe ich absichtlich gegoogelt und Folgendes gefunden:

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;word-wrap: break-word;}

Nach dem Login kopieren

Nach dem Testen, außer IE [verwendet derzeit 6], andere Okay. .. Ich war deprimiert und habe dann width:600px; hinzugefügt und dann, ok, die Zeile wurde geändert, aber die Position wurde tatsächlich abgeleitet. Es sieht so aus: Der Code ist drin, aber die Erzählung darunter ist raus. Mit anderen Worten, die Definition dieser Breite ist keine gute Methode. Es gibt grundsätzlich keine anderen Methoden, die das CSS nicht direkt ändern. Dann habe ich mir das CSS oben angesehen und dachte: Warum verwende ich Leerzeichen, wenn ich andere Dinge definiere, aber nicht, wenn ich IE definiere? Es ist nicht so, dass IE es nicht unterstützt. . Also füge es einfach hinzu [Ich habe die ersten 5 Seiten von Google durchgesehen und konnte keine Lösung finden, die durch eine CSS-Änderung gelöst werden könnte...].

pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;
white-space : normal ;      
}

Nach dem Login kopieren

Was den auf dieser Website verwendeten betrifft, ist IE von anderen getrennt, da sich Leerzeichen letztendlich auch auf andere auswirken....

Das obige ist der detaillierte Inhalt vonWie kann ich den Pre-Tag-Wrap automatisch durchführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

换行标签自动

Quelle：php.cn

Vorheriger Artikel：Lösen Sie das Problem des automatischen Zeilenumbruchs des Inhalts von HTML-Pre-Tags Nächster Artikel：Lassen Sie den Text des

-Tags automatisch umbrechen

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

Neueste Artikel des Autors