数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在HTML中禁用文字换行？
自动换行是指自动将一行结尾的单词移到新的一行，以保持文本在页边距内。在HTML中，这意味着元素内的文本会根据该元素的边界自动换行。
示例
让我们考虑一个示例，其中我们有一个<div>元素包含一些文本，并且它的样式设置为固定宽度。
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin:20px;
background-color:lightblue;
width:90px;
}
</style>
</head>
<body>
<div>
Hi there, Have a good day!
</div>
</body>
</html>
我们可以看到，文本根据容器的边界换行，在本例中是<div>元素的宽度。
CSS white-space 属性
CSS `white-space` 属性控制如何处理元素内的空白字符。空白字符通常是空格序列或换行符。此属性可以应用于任何元素的内联内容。多余的空格将合并为一个空格，换行符将被删除，并且行将被换行以适应其容器。
语法
white-space: normal|nowrap|pre|pre-line|pre-wrap
其中：
normal: 空格序列将合并成单个空格。必要时，文本将换行。这是标准设置。
nowrap: 空格序列将合并成单个空格。文本将永远不会换行到下一行。文本将继续在同一行上，直到遇到`
`标签。pre: 浏览器保留空白字符。只有换行符才会导致文本换行。
pre-line: 空格序列将合并成单个空格。必要时，文本将在换行符处换行。
pre-wrap: 浏览器保留空白字符。文本将在需要时换行，以及在换行符处换行。
在本教程中，我们将讨论如何使用CSS `white-space` 属性来防止HTML中的文字换行。
使用 `white-space: nowrap` 属性
当CSS `white-space` 属性设置为`nowrap`时，任何两个或多个空格的序列都将显示为单个空格。除非显式指定，否则元素的内容将不会换行。
示例
下面的示例演示了如何使用`whitespace`属性的`nowrap`值禁用文字换行。
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Word Wrapping in HTML?</title>
<style>
.container{
width:300px;
height:30px;
background-color:linen;
white-space: nowrap;
}
p{
font-size:12px;
}
</style>
</head>
<body>
<h3>An inspiring quote</h3>
<div class="container">
Winning is not necessarily finishing first but finishing well, to the best of your God-given abilities. When you embrace this concept in your life, you will be relieved from the stress of competing to finish first, to win in life.
</div>
<p>Note: Word wrapping is disabled here</p>
</body>
</html>
使用 `white-space: pre`
在前面的示例中，有一些换行符允许文本独立存在（在代码中）。当文本在浏览器中呈现时，换行符似乎被删除了。第一个字母之前的额外空格也被删除了。我们可以使用`white-space: pre`强制浏览器显示这些换行符和额外的空格字符。
它被称为`pre`，因为其行为与文本包含在<pre></pre>标签中相同（默认情况下，这些标签以这种方式处理空白字符和换行符）。空白字符的处理方式与HTML中相同，并且文本不会换行，除非代码中存在换行符。这在显示代码时特别有用，因为代码的美观需要一些格式。
示例
下面的示例演示了如何使用`whitespace`属性的`pre`值禁用文字换行。
<!DOCTYPE html>
<html>
<head>
<title>How to Disable Word Wrapping in HTML?</title>
<style>
.container{
width:400px;
height:30px;
background-color:aliceblue;
border:1px solid azure;
white-space: pre;
}
p{
margin-top:20px;
font-size:13px;
}
</style>
</head>
<body>
<h3>Talk more, Type less</h3>
<div class="container">
People often undervalue the positive impact on their relationships by speaking versus text alone. So, if you’ve been putting off having a difficult conversation or you’re just more comfortable sending a written message, take a moment to consider whether it might be more fruitful to rise above your discomfort and brave a real conversation instead.
</div>
<p>Note: Word wrapping is disabled here</p>
</body>
</html>
1K+ 次浏览
