技術文章 » css怎麼設定p標籤不換行

css怎麼設定p標籤不換行

2021-01-27 21:00:48

設定p標籤不換行的方法：使用display屬性，在p標籤元素中設定display屬性的值為「inline」或「inline-block」；這樣可以使p標籤被顯示為內聯元素或行內塊元素，元素前後沒有換行符，也就無法換行了。

本文操作環境：宏基S40-51、CSS3&&HTML5&&HBuilderX.3.0.5版、Windows10 家庭中文版

（學習視訊分享：）

HTML p標籤

p標籤是塊級元素，會獨佔一行。預設情況下p標籤會自動換行的。

範例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css設定p標籤不換行</title>
		<style>
			p{
				background: pink;
			}
		</style>
	</head>
	<body>
		<p>測試文字。</p>
		<p>測試文字。</p>
		<!-- 
		p標籤是塊級元素，會獨佔一行
		預設情況下p標籤會自動換行的
		 -->
	</body>
</html>

效果圖：

1.png

如果我們想要讓p標籤不換行，讓兩個p標籤在同一行該如何設定呢？

設定p標籤不換行

css可以通過為p標籤設定「display:inline;」或「display:inline-block;」樣式使p標籤不換行。

範例：

3.png

效果圖：

4.png

display:inline;

display 屬性規定元素應該生成的框的型別。

這個屬性用於定義建立佈局時元素生成的顯示框型別。對於 HTML 等檔案型別，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML，由於 XML 沒有內建的這種層次結構，所有 display 是絕對必要的。

屬性值：

  • block 此元素將顯示為塊級元素，此元素前後會帶有換行符。

  • inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符。

  • inline-block 行內塊元素，元素前後沒有換行符。（CSS2.1 新增的值）

內聯元素的特徵：

  • 設定寬高無效

  • 對margin僅設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐大空間

  • 不會自動進行換行

行內塊元素的特徵：

  • 不自動換行

  • 能夠識別寬高

  • 預設排列方式為從左到右

更多程式設計相關知識，請存取：！！

以上就是css怎麼設定p標籤不換行的詳細內容，更多請關注TW511.COM其它相關文章！