How to wrap text in pre tag in html? Usage examples of html pre tag-HTML Tutorial-php.cn

How to wrap text in pre tag in html? Usage examples of html pre tag

寻∝梦

Release： 2018-08-28 13:41:59

Original

10065 people have browsed it

This article mainly introduces examples of how to use the html pre tag, and also introduces the role of the HTML pre tag. It uses examples to prove to everyone that pre is indeed useful. Tags, in the early stages, it is much easier to use pre tags than other tags. Okay, now let us take a look at the following article

First let us understand what the pre tag in HTML can do?

What can the pre tag in HTML do? In layman’s terms, the pre tag can display all the text formats in it on the web page, such as spaces, line breaks, etc. It is displayed without leaving any trace by the browser. Let’s take a look at the effect.

First let us understand the role of the pre tag:

is the

 tag, which can correctly display the text format inside in the browser, just like the line break format, wrap the line inside (if you want to know more about HTML, please search " PHP Chinese website" to watch) <p><strong>The first one must be to understand how it wraps lines: </strong><br></p><p>For example, I create a new web page in the pre tag ：</p><pre class="brush:html;toolbar:false"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<pre class="brush:php;toolbar:false">欢迎大家来到PHP中文网

Copy after login

This is a normal web page, as shown in the picture:

How to wrap text in pre tag in html? Usage examples of html pre tag

Now I wrap the above paragraph in it to display

<body>
<pre class="brush:php;toolbar:false">欢迎大家来到
PHP中文网

Copy after login

Now look at the effect:

How to wrap text in pre tag in html? Usage examples of html pre tag

You see, the above picture has completely changed one line, and all the spaces in the middle are displayed. In pre There is no need to add any tags to realize the line wrapping function

The second one is to take a look at the display of spaces

The space function of HTML pre tag is also the same as The lines are similar. If you enter three spaces in the text, then the three spaces will be displayed in the browser.

Let’s see the example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<pre class="brush:php;toolbar:false">欢迎大 家来到PHP中文网（这里是一个空格）

Copy after login

欢迎大  家来到PHP中文网（这里是两个空格）

Copy after login

欢迎大   家来到PHP中文网（这里是三个空格）

Copy after login

这是一个普通的p标签，这里我用了五个空格，你看到了没有

Let’s see the effect

How to wrap text in pre tag in html? Usage examples of html pre tag

This is the effect of the above space display. With comparison, we can easily find that the above space is also a space when displayed in the browser. Three spaces can It is displayed in the browser, but I used five spaces in the p tag, but when it comes to the browser, it becomes like not even one space.

This is the best use of the HTML pre tag for me. In any paragraph, you can enter any format you want by adding the

 tag, which is much more convenient. The meaning of the <strong><pre class="brush:php;toolbar:false"> tag in official terms is (preformatted text) pre-text format

Copy after login

, which displays the text format in the browser (if you want to know more about HTML, please click ：http://www.php.cnTo watch)

Okay, the above is an introduction to the role of HTML pre tags and examples of how to use spaces and how to wrap lines. . If you have anything you don’t understand, you can ask questions below.

【Editor's Recommendation】

How to write a relative path for the base tag in HTML? (Introduction to use included)

What is the usage of the src attribute of the HTML img tag? Analysis of specific usage methods (examples attached)

The above is the detailed content of How to wrap text in pre tag in html? Usage examples of html pre tag. For more information, please follow other related articles on the PHP Chinese website!