css如何让文本不换行

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>

效果图:

3e109fd8d18f67511fdb9211cc8e0ca0

说明:

white-space属性指定元素内的空白怎样处理。

属性值:

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容