如何强制 <Div> 元素的内容保持在同一行?

htmlweb developmentfront end technology更新于 2025/3/26 21:00:17

<div> 或 division 标签用于对网页中的 HTML 元素进行分组，使我们能够创建具有相似功能的不同部分，并且可以使用 Id 或 class 属性轻松设置样式。HTML <div> 是一个块级元素，默认情况下，它不会显示与其相邻的任何其他 HTML 元素。

Div 是 Web 开发中最有用的标签，因为它允许我们分离网页中的数据，并为网页中的特定数据或功能创建特定的部分。它通常成对使用。内容写在开始 (<div>) 和结束 (</div>) 标签之间。

示例

让我们看一个示例，该示例展示了内容包装在 div 元素中。

<!DOCTYPE html>
<html>
<head>
<title>Content layout in a div tag</title>
<style>
    div{
        background-color:lightyellow;
    }
</style>
</head>
<body>
    <h3>There is a div element below this line</h3>
    <div>
        By default, the content wraps itself according to the dimensions of the element within which it is contained. Hence, the text does not get clipped, instead it moves to the next line.
    </div>
</body>
</html>

我们可以观察到，内容会根据 div 标签的宽度自动移动到下一行，在本例中，宽度由浏览器宽度决定。

假设我们为 div 元素设置了一个自定义宽度，比如 250 像素，内容将根据该宽度自动换行。

但是，我们可以更改默认设置，并使用下面讨论的某些 CSS 属性，强制 <div> 标签的内容水平显示在同一行。

使用溢出和空白属性

CSS overflow 属性 指定当内容太大而无法放入容器并溢出边缘时会发生什么。此外，还有姐妹属性 overflow-y 和 overflow-x，它们不太常用。

overflow 属性有四个选项:visible(默认)、hidden、scroll 和 auto。我们可以将 overflow 属性设置为 "hidden"，以防止内容渲染到元素边界之外。这样一来，用户将无法滚动到框的内边距边缘之外阅读内容，因为内容会被裁剪到那里。

CSS white-space 属性

CSS white-space 属性 控制如何显示空格序列。它指定是否应折叠空格(合并为单个空格)以及是否应在行尾换行。

white-space 属性使用 5 个不同的关键字值设置:normal、pre、nowrap、pre-wrap 和 pre-line。当 CSS white-space 属性设置为 "nowrap" 时，任何两个或多个空格的序列都会显示为单个空格。除非明确指定，否则元素的内容不会换行。

CSS float 属性用于定位。它用于将元素移动到左或右，以便其他元素可以环绕它。它最常用于图像和布局。

示例

在下面的示例中，我们将 overflow 设置为 hidden，并使用 whitespace 属性的 nowrap 值强制 div 的内容保持在同一行。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Force the Content of the <div> Element to Stay on the Same Line?</title>
    <style>
      div {
          background-color:whitesmoke;
          height:30px;
          width:250px;
          overflow:hidden;
          white-space:nowrap;
      }
    </style>
  </head>
  <body>
    <div>This is an example of text clipping using the CSS overflow and white-space properties.</div>
  </body>
</html>

使用浮动元素

在本例中，我们将使用三个固定宽度的浮动元素:div、ul 和 li。为了使子组件能够在同一行水平浮动，子包装器的宽度设置为大于父级。

示例

<!DOCTYPE html>
<html>
  <head>
    <title>How to Force the Content of the <div> Element to Stay on the Same Line?</title>
    <style>
      #parent {
        width: 300px;
        height: 100px;
        overflow-x: auto;
        overflow-y: hidden;
      }
      #childWrapper {
        list-style: none;
        width: 420px;
        height: 100px;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #childWrapper > li {
        float: left;
        width: 140px;
        height: 100px;
        background-color: thistle;
      }
      #childWrapper > li:nth-child(even) {
        background-color: lavenderblush;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <ul id="childWrapper">
        <li>111111111111111111111111</li>
        <li>222222222222222222222222</li>
        <li>333333333333333333333333</li>
      </ul>
    </div>
  </body>
</html>