如何給html中的pre標籤中的文字換行？ html pre標籤的使用實例-html教學-PHP中文網

如何給html中的pre標籤中的文字換行？ html pre標籤的使用實例

寻∝梦

發布： 2018-08-28 13:41:59

原創

10063 人瀏覽過

這篇文章主要的介紹了關於html pre標籤的使用方法的實例說明，還介紹了關於HTML pre標籤的作用，都用實例給大家證明了，pre確實是個有用的標籤，在初級的時候，用pre標籤比別的標籤簡單多了。好了，現在就讓我們一起來看下面這篇文章吧

首先讓我們來了解一下HTML中的pre標籤能幹什麼？

HTML中的pre標籤能乾些什麼呢，用通俗的話來解釋就是pre標籤能把它裡面的文字格式都在網頁中顯示出來，比如空格啊，換行啊，都能被瀏覽器給一個不留的顯示出來，讓我們一起來看看效果吧

先讓我們來了解pre標籤的作用：

是

標籤可以把裡面的文字格式在瀏覽器中能正確的顯示出來，就想換行格式一樣，在裡面換行（想看更多關於HTML的知識，歡迎搜尋“ PHP中文網」觀看）<p><strong>第一個肯定是了解它是怎麼換行的：</strong><br></p><p>例如，我在pre標籤裡面新建一個網頁：</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中文网

登入後複製

這是一個正常的網頁，如圖：

如何給html中的pre標籤中的文字換行？ html pre標籤的使用實例

#現在我在裡面把上面那段話換行顯示

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

登入後複製

現在再看下效果：

如何給html中的pre標籤中的文字換行？ html pre標籤的使用實例

你看，上圖完全換了一行，還把中間的空格都顯示出來了，在pre裡面不需要加任何標籤，就能實現換行的功能

第二個來看看空格顯示的情況吧

##HTML pre標籤的空格功能也是和分行差不多，你在文字中你輸入三個空格，那在瀏覽器中你也會顯示出來三個空格，

#來看實例說明：

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

登入後複製

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

登入後複製

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

登入後複製

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

來看效果

如何給html中的pre標籤中的文字換行？ html pre標籤的使用實例

這就是上面的空格顯示的效果，有了對比，我們很容易發現，這上面的一個空格在瀏覽器中顯示也是一個空格，三個空格都能在瀏覽器中顯示出來，但是在p標籤中我用了五個空格，到了瀏覽器下，就變成一個空格都不到的樣子。

這就是對我來說HTML pre標籤的最好用的地方，在任何段落中，你只要加入

標籤就能輸入任何你想輸入的格式，這就方便的很多<p></p><pre class="brush:php;toolbar:false">標籤的意思用官方的話來說就是（preformatted text）預文本格式<strong>，把文本格式在瀏覽器中給它顯示出來（想看更多關於HTML的知識，歡迎點擊：</strong>http://www.php.cn<a href="http://www.php.cn" target="_blank">進行觀看）</a>好了，以上就是對HTML pre標籤的作用介紹還有怎麼使用空格和怎麼換行的實例都說出來了。大家如果有什麼不懂的地方可以在下面提問。 <p></p>【小編推薦】<p></p><p>HTML中的base標籤如何寫相對路徑？ （內附使用介紹）<a href="http://www.php.cn/div-tutorial-409122.html" target="_blank"></a><br></p><p>HTML img標籤的src屬性的用法是什麼？具體使用方法解析（內附實例）<a href="http://www.php.cn/div-tutorial-409121.html" target="_blank"></a><br></p>

登入後複製

以上是如何給html中的pre標籤中的文字換行？ html pre標籤的使用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！