首页 技术文章 css

css禁止换行white-space:nowrap;

发布日期: 2024-02-11
FontSize: 【小 中 大】
css禁止换行white-space:nowrap;

有时候，您只给一段文字预留了一行的高度，但如果文本太长，一般它会自动换行，可能这不是您想要的，这样显示可能会显示得不那么好看及友好。

您可以使用 white-space 属性，将其值设置为 nowrap。这样做可以强制文本在一行上显示，直到遇到 <br> 标签或者容器边界为止。

使用white-space: nowrap;禁止文本换行

以下是一个示例，展示如何禁止文本换行：

p {
  white-space: nowrap;
  overflow: hidden;
}

在使用禁止换行时，通常会不想文本溢出来，这样会破坏布局，可以使用溢出隐藏属于overflow: hidden;

在线测试一下禁止换行效果

点击右上角的按钮“在线测试"或“运行”看看效果，通常，如果是html代码段时，右上角会显示四个按钮，比一般的代码段会多出两个按钮。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%; /* 设置元素宽度 */
	background: #B4DB5C;
}
</style>
</head>
<body>
<p>如果您不想该段内容自动换行，请使用CSS样式white-space: nowrap;为了让用户知道还有没有完全显示的内容，可以使用overflow: hidden;text-overflow: ellipsis;试着改变窗口的大小来测试效果。</p>
</body>
</html>

测试一下，是不是这样显示的更加友好！使用text-overflow: ellipsis配合overflow: hidden，有内容溢出时会自动在结尾处显示省略号。

关于white-space属性的9种值

white-space 属性用于控制元素内部文本的空白处理方式。以下是white-space属性可能的取值：

  1. normal：默认值。连续的空白字符会被合并为一个空格，并且文本会根据需要自动换行。
  2. nowrap：禁止文本换行，连续的空白字符也会被合并为一个空格。
  3. pre：保留空白字符和换行符，但是不自动换行。文本将按照源代码中的格式显示。
  4. pre-wrap：保留空白字符和换行符，但是允许自动换行。
  5. pre-line：合并连续的空白字符，但保留换行符，并允许自动换行。
  6. break-spaces：合并连续的空白字符，但保留换行符，并允许自动换行。与 pre-wrap 类似，但会在遇到容器边界或强制换行符（<br>）时换行。
  7. inherit：继承父元素的 white-space 属性值。
  8. initial：将 white-space 属性重置为默认值 normal。
  9. unset：取消设置的 white-space 属性，将其恢复为默认值。

一般其它属性使用的不多，要么是默认自动换行，要么是禁止换行。

 

css