数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 CSS 防止文本占用超过一行？
网页上的内容以我们已经学过的多种形式进行组织，例如图层、段落、行、表格和分区。所有 HTML 标签及其内容在网页上的适当定位被称为文本组织。默认情况下，Web 浏览器会封装网页上的文本并将其显示在一个块中，从而消除行和段落换行符。如果页面内容没有被任何行或段落换行符分割，那么读者现在很难理解提供的信息。
组织良好的网站内容可以提高可用性和搜索引擎优化，减少用户烦恼，并在访问者访问您的网站时培养好感。在 HTML 文档中组织文本对于开发人员来说始终是一项繁琐的任务。在本文中，我们将讨论如何在使用 CSS 时对文档中的文本进行排序。
首先，让我们了解一下网页上的文本溢出是什么。
文本溢出
在 CSS 中，每个元素都是一个盒子。通过为这些盒子的宽度和高度设置值，您可以限制它们的大小（或内联大小和块大小）。当内容过多而无法容纳在盒子内时，就会发生溢出。CSS 提供了许多管理溢出的技术。随着您练习 CSS 布局和创作，将出现更多溢出实例。
示例
<!DOCTYPE html>
<html>
<head>
<title> Overflow of Text </title>
<style>
h1{
text-align: center;
color: #FF0000;
text-decoration: underline;
}
.container {
border: 3px solid black;
width: 200px;
height: 100px;
position: absolute;
left: 40%;
}
</style>
</head>
<body>
<h1> Overflow of text </h1>
<div class= "container"> This box has a height of 100px and a width of 200px. So, in case there is extra content (text) which could not fit inside the container, overflow occurs. In this example, we can see our text overflowing out of the container specified. </div>
</body>
</html>
在本文给出的示例中，文本溢出了容器。CSS 的 overflow 属性用于组织此文本溢出。
排序文本溢出
CSS 使开发人员能够对文本溢出进行排序。此外，我们可以使用 CSS 属性控制或防止文本占用超过一行。为了调节或禁止一段文本上的换行符，可以使用各种 CSS 属性。这些属性如下所示：
Overflow 属性
CSS 的overflow 属性用于确定当元素的内容变得足够大以至于超出容器（指定区域）时，是否需要裁剪内容或添加滚动条。
overflow 属性只能应用于块级元素。此属性的值必须针对两个特定的轴指定 - X 轴和 Y 轴。我们在overflow-x 和overflow-y 下指定这些。它具有以下值：
visible- 默认值。溢出的内容显示在容器外部。它不会被裁剪。
hidden- 溢出的（额外的）内容变得不可见，即它不会显示在屏幕上。
clip- 额外的内容变得不可见，同时溢出被裁剪。但是，使用此属性不会启用滚动。
auto- 浏览器本身会检测溢出并相应地添加滚动条。
scroll- 添加滚动条。这使我们能够通过滚动元素来查看额外内容。
Whitespace 属性
可以使用此 CSS 属性控制元素边框内的空白（包含内容的空白）。如果此属性设置为nowrap，则元素内的文本将只有一行长，但仍可能有一些文本溢出元素的边界。
语法
element{
white-space: values;
}
它具有以下值：
Normal - 这是默认值。多个空格最终会合并为一个空格。文本将根据需要自动换行。
Nowrap - 多个空格后，空格将合并为一个空格。文本不会换行。在标签之前，文本保持在同一行。
Pre-line - 多个空格后，空格将合并为一个空格。文本在需要时换行，并在换行符处换行。
Pre-wrap – 空格由浏览器调节。文本在需要时换行，并在换行符处换行。
Pre- 文本在换行符处换行。
Text-overflow 属性
此 CSS 属性使开发人员能够指定不应显示的溢出内容如何显示给用户。它可以被裁剪，可以显示省略号（…），或者可以显示自定义字符串。
语法
element{
text-overflow: values;
}
值为clip, string, ellipses, initial 和inherit。
示例
<!DOCTYPE html>
<html>
<head>
<title>Organizing text overflow</title>
<style>
* {
margin: 10px;
padding: 5px 5px 10px;
}
div {
width: 70%;
height: 10px;
border: 2px solid blue;
}
.box1 {
white-space: nowrap;
}
.box2 {
overflow: hidden;
}
.box3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1> Example </h1>
<h2> How to prevent text from occupying more than one line? </h2>
<div>
We'll look at how to prevent text from occupying more than one line. The following CSS properties can be used to do:
</div>
<h2> White-space Property </h2>
<div class= 'box1'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer programme is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding).
</div>
<h2> Overflow Property </h2>
<div class= 'box2'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer programme is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding).
</div>
<h2> Text-overflow Property</h2>
<div class= 'box3'>
The process of carrying out a given computation (or, more broadly, achieving a specified computing result) through the design and construction of an executable computer programme is known as computer programming. Analysis, algorithm generation, resource use profiling, and algorithm implementation are some of the duties involved in programming (usually in a chosen programming language, commonly referred to as coding).
</div>
</body>
</html>
结论
无论您是从头开始设计布局还是修改已创建的布局，溢出都是您可能遇到的常见问题。如果您知道如何调节溢出，则可以在不影响对齐或放置的情况下开发和个性化您的布局。在本文中，我们讨论了如何使用不同的 CSS 属性在网页中组织和排序文本溢出。
2K+ 浏览量
