css如何讓文字不換行

青灯夜游原創: 2021-04-20 18:37:5454895瀏覽

在css中，可以使用white-space屬性讓文字不換行，只需要給文字文字元素新增「white-space:nowrap;」樣式即可。 white-space屬性用來設定元素內的空白怎樣處理，當值為「nowrap」時設定文字不換行。

css如何讓文字不換行

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css讓文字不換行

css可以使用white-space屬性設定元素內文字不換行，程式碼範例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			p {
				width: 300px;
				border: 1px solid red;
				
			}
			p.nowrap{
				white-space: nowrap;
			}
		</style>
	</head>

	<body>

		<p>
			这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
		</p>
		<p class="nowrap">
			这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。
		</p>
	</body>

</html>

效果圖：

css如何讓文字不換行

說明：

#white-space屬性指定元素內的空白怎麼處理。

屬性值：

##normal# #預設.空白會被瀏覽器忽略。 pre空白會被瀏覽器保留。其行為方式類似 HTML 中的

 標籤。

文字不會換行，文字會在同一行上繼續，直到遇到
標籤為止。 pre-wrap保留空白符號序列，但正常地進行換行。 pre-line合併空白符號序列，但保留換行符號。

值	#描述


nowrap

（學習影片分享：css影片教學

）###

以上是css如何讓文字不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 css css3 html

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css 背景顏色怎麼設定下一篇：css 背景顏色怎麼設定

看更多