css怎麼設定p標籤不換行
- 青灯夜游原創
- 2021-01-27 18:29:2416431瀏覽
設定p標籤不換行的方法：使用display屬性，在p標籤元素中設定display屬性的值為「inline」或「inline-block」；這樣可以讓p標籤被顯示為內嵌元素或行內塊元素，元素前後沒有換行符，也就無法換行了。
本文操作環境：宏基S40-51、CSS3&&HTML5&&HBuilderX.3.0.5版、Windows10 家庭中文版
（學習影片分享：css影片教學）
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>效果圖：
#如果我們想要讓p標籤不換行，讓兩個p標籤在同一行該如何設定？
設定p標籤不換行
css可以透過為p標籤設定「display:inline;」或「display:inline-block;」樣式使p標籤不換行。
範例：
效果圖：
<strong>display:inline ;</strong>
display 屬性規定元素應該產生的框的類型。
這個屬性用來定義建立佈局時元素產生的顯示框類型。對於 HTML 等文件類型，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML，由於 XML 沒有內建的這種層次結構，所有 display 是絕對必要的。
屬性值：
block 此元素將顯示為區塊級元素，此元素前後會帶有換行符。
inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符號。
inline-block 行內區塊元素，元素前後沒有換行符號。 （CSS2.1 新增的值）
內嵌元素的特徵：
設定寬高無效
對margin只設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐大空間
不會自動進行換行
行內區塊元素的特徵：
#不自動換行
能夠辨識寬高
預設排列方式為從左到右
更多程式相關知識，請造訪：程式影片！ ！
以上是css怎麼設定p標籤不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！