CSS 如何防止文字占据超过一行

网页上的材料是以我们已经学过的多种形式来组织的，如层、段、行、表和分部等。所有HTML标签及其内容在网页上的适当定位被称为文本组织。网络浏览器在默认情况下，会将网页上的文本封装起来，以单一的块状显示，取消了行和段的分隔。现在，如果一个页面的内容没有任何行或段的分割，读者要掌握所提供的信息是相当困难的。

组织良好的网站内容增加了可用性和搜索引擎优化，减少了用户的烦恼，培养了访问者对你网站的好感。在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的溢出属性被用来组织这种溢出的文本。

对溢出的文本进行排序

CSS使开发者能够对溢出的文本进行排序。此外，我们还可以用CSS属性来控制或防止文本占据超过一行。为了规范或禁止文本块的换行，可以使用各种CSS属性。这些属性如下

溢出属性（Overflowproperty

CSS的溢出属性用于确定当元素的内容大到足以离开容器（指定区域）时，是否需要对内容进行剪裁或添加滚动条。

溢出属性只能应用于块状元素。这个属性的值必须为两个特定的轴–X轴和Y轴–指定。我们在 overflow-x 和 overflow-y 下指定这些。它有以下值 –

visible - 默认值。溢出的内容会显示在容器外。它不会被剪掉。
hidden - 溢出的（额外的）内容是不可见的，也就是说，它不显示在屏幕上。
clip - 溢出的内容是不可见的，而溢出的内容是被剪切的。然而，使用这个属性，滚动是不允许的。
auto - 浏览器本身会检测到溢出，并相应地添加滚动条。
scroll - 添加滚动条。这使我们能够通过滚动该元素看到额外的内容。

白色空间属性

元素边框内的空白空间（包含内容的空间）可以用这个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>