Example code for making the pre tag automatically wrap
|
The pre element defines preformatted text. Text enclosed in a pre element usually preserves spaces and line breaks. The text will also be rendered in a monospaced font. A common application of the <pre> tag is to represent computer source code. Technical blogs often use the pre tag to output code or highlight code. By default, the content in the pre tag will not automatically wrap if it exceeds the range. Here is a method to make the content in the <pre> tag automatically wrap and comply with W3C standards (supported by multiple browsers) Copy code The code is as follows:pre{ white-space:pre-wrap; /* css3.0 */ white-space:-moz-pre-wrap; /* Firefox */ white-space:-pre-wrap; /* Opera 4-6 */ white-space:-o-pre-wrap; /* Opera 7 */ word-wrap:break-word; /* Internet Explorer 5.5+ */ } Example: Copy code The code is as follows:pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; /*This is a very long code. See that I have wrapped the code, right? */} |
<<: Detailed explanation of common methods of JavaScript Array
>>: Illustration-style website homepage design New trend in website design
Recommend
React example showing file upload progress
Table of contents React upload file display progr...
Web Design Tutorial (6): Keep your passion for design
<br />Previous article: Web Design Tutorial ...
Summary of Css methods for clearing floats
Float is often used in web page layout, but the f...
Solutions to MySQL OOM (memory overflow)
OOM stands for "Out Of Memory", which m...
An article to help you understand Js inheritance and prototype chain
Table of contents Inheritance and prototype chain...
Solve the problem of garbled data in MySQL database migration
Under the instructions of my leader, I took over ...
Introduction to vim plugin installation under Linux system
Table of contents Install vim plugin manager Add ...
Detailed explanation of Vue life cycle functions
Table of contents Lifecycle Functions Common life...
Detailed explanation of nodejs built-in modules
Table of contents Overview 1. Path module 2. Unti...
Sample code using the element calendar component in Vue
First look at the effect diagram: The complete co...
Detailed steps for yum configuration of nginx reverse proxy
Part.0 Background The company's intranet serv...
Pure CSS to achieve horizontal line animation under the element (background-image)
Effect picture: html: <div class='site_bar...
Vue implements simple image switching effect
This article example shares the specific code of ...
Summary of knowledge points related to null (IFNULL, COALESCE and NULLIF) in MySQL
This article uses examples to explain the knowled...
Detailed explanation of using split command to split Linux files
A few simple Linux commands let you split and rea...