如何强制

元素的内容保持在同一行?

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.

使用溢出和空白属性

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 的内容保持在同一行。

使用浮动元素

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

示例

相关文章

HTML 脚本 charset 属性

HTML option selected 属性

HTML ol reversed 属性

HTML pre 标签

HTML s 标签

HTML q cite 属性

HTML output 标签

HTML 输入框 checked 属性

HTML 和 ASP 的区别

HTML5 中的 Websockets Apache 服务器兼容性

有用资源

html 参考教程 - 该教程包含有关 html 的更多信息:https://www.w3schools.cn/html/

打印

下一节:如何在 HTML 表单和输入字段上禁用浏览器自动完成和自动填充功能? ❯❮ 上一节:如何创建 Mailto 表单?