HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何在 CSS 中防止文本占用多行?

cssweb developmentfront end technology更新于 2025/1/13 16:44:17

网页内容的结构形式多种多样，我们已经学过，例如层、段落、行、表格和分区。所有 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- 添加滚动条。这使我们能够通过滚动元素来查看额外的内容。

空白属性

可以使用此 CSS 属性控制元素边框内的空白(包含内容的空间)。如果此属性设置为 nowrap，元素内的文本将只有一行，但仍可能有部分文本溢出元素边界。

语法

element{
   white-space: values;
}

它具有以下值 -

  • Normal- 这是默认值。多个空格最终会合并为一个空格。文本将根据需要自动换行。

  • Nowrap- 多个空格后，空格会合并为一个空格。文本不会换行到下一行。在遇到标签之前，文本会保持在同一行。

  • Pre-line - 多个空格后，空格会合并为一个空格。文本会在需要时换行，并且在换行处换行。

  • Pre-wrap - 空格由浏览器控制。文本会在需要时换行，并且在换行处换行。

  • 前置文本在换行符处自动换行。

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 属性来组织和排序网页中的文本溢出。

相关文章

有用资源

打印 下一节:如何在横跨整个网页的部分中垂直对齐图片? ❯❮ 上一节:如何使用 CSS 创建文本拆分效果?