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的overflow属性用于组织这种文本溢出。

排序文本溢出

CSS使开发人员能够对文本溢出进行排序。此外，我们可以使用CSS属性来控制或防止文本占用多行。为了控制或禁止文本块上的换行，可以使用各种CSS属性。这些属性如下-

Overflow属性

CSS的 overflow 属性用于确定当元素的内容变得足够大而超出容器（指定区域）时，是否要剪裁内容或添加滚动条。

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

visible - 默认值。溢出的内容显示在容器外部。不会被剪裁。
hidden - 溢出（额外）内容被隐藏，即不显示在屏幕上。
clip - 当溢出时，额外内容被隐藏。但是，使用此属性不启用滚动。
auto - 浏览器自动检测溢出并相应地添加滚动条。
scroll - 添加滚动条。这使我们可以通过滚动元素来查看额外的内容。

White-space属性

可以使用此CSS属性来控制元素边界内的空白空间（包含内容的空间）。如果将此属性设置为 nowrap ，则元素内部的文本只有一行长，但仍然可能会有一些文本溢出元素的边界。

语法

element{
   white-space: values;
}

它有以下值 –

Normal - 这是默认值。多个空白符最终会合并为一个空格。文本会根据需要自动换行。
Nowrap - 多个空白符之间会合并为一个空格。文本不会换行到下一行。直到遇到
标签，文本仍然在同一行。
Pre-line- 多个空白符之间会合并为一个空格。文本在需要时会换行，并在换行处断开。
Pre-wrap - 空白符由浏览器管理。文本在需要时会换行，并在换行处断开。
Pre– 文本在换行处断开。

文本溢出属性

这个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>