溢出：滚动替换内联元素 - CSS

有时，您可能希望在容器中添加更多的内容，但是容器太小无法容纳。这时候，在容器内滚动元素可以解决这个问题。CSS中有一种属性可以实现这个效果，它就是 overflow 属性。

overflow 属性

overflow 属性规定当内容溢出元素框时发生的事情。

• visible （默认）：允许内容溢出元素框，在元素框外部呈现
• hidden：不允许内容溢出元素框，内容被修剪
• scroll：允许内容溢出元素框，会添加滚动条以便查看所有内容
• auto：内容在需要时溢出元素框，会添加滚动条以便查看所有内容

语法：

/* 建议为您的元素添加高度和宽度属性 */
.overflow-class {
  overflow: visible|hidden|scroll|auto;
}

white-space 属性

如果您的内容不是块级元素而是内联元素，您可以使用 white-space 属性来控制元素内文本的排列方式。默认情况下，内联元素会根据需要被包装到新行或下一行，这取决于它们能否适合其包含的块。

white-space 属性用来设置元素内部空白的处理方式。

• normal （默认）：空白会被浏览器忽略
• nowrap：文本在遇到换行符（\n）时不换行，而是在同一行上显示整个字符串
• pre：空白会被浏览器保留。连续的空白会被浏览器解释为一个空格
• pre-wrap：保留空白符序列，但是正常地进行换行
• pre-line：合并空白符序列，保留换行符。文本在遇到换行符（\n）或回车符（\r）时换行

语法：

/* 建议为您的元素添加宽度和高度属性 */
.white-space-class {
  white-space: normal|nowrap|pre|pre-wrap|pre-line;
}

替换内联元素

假设您的文本太长，您希望它可以在容器内滚动以免影响页面布局。您可以使用 white-space 来保证文本不会折行，并使用 overflow 创建滚动区域。

代码示例：

<div class="wrapper">
  <span class="scroll-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id velit euismod, euismod justo a, euismod tellus. Integer elementum quam lacus. Maecenas vel est sit amet ex pulvinar vehicula eget a dui. Sed dictum nulla nisi. 
  </span>
</div>

.wrapper {
  width: 200px;
  height: 100px;
  overflow: auto;
}

.scroll-text {
  white-space: nowrap;
}

这个例子创建了一个 200x100 的容器，其中包含了一个长文本。 white-space 设置为 nowrap，强制文本在同一行上显示，并且 overflow 设置为 auto，使在必要时显示滚动条。这使得文本可以在容器中滚动，不会干扰布局。

以上就是如何在CSS中创建基本的内联元素滚动框。如果您需要更复杂的滚动效果，可以考虑使用 JavaScript 组件库。