CSS 在pre标签上显示垂直滚动条

在本文中，我们将介绍如何在CSS中显示垂直滚动条，并将其应用于pre标签。

pre标签是HTML中用于展示预格式化文本的标签。由于其内容通常较长且需要保留原始格式，因此经常需要使用滚动条来浏览全部内容。

阅读更多：CSS 教程

使用overflow属性显示滚动条

CSS的overflow属性可以用于控制元素内部内容的显示方式。通过设置该属性为scroll，可以在元素内部显示垂直滚动条。我们可以将该属性应用于pre标签，实现预格式化文本内容的滚动显示。

pre {
  overflow: scroll;   /* 显示垂直滚动条 */
}

只要pre标签中的内容超出其容器的高度，就会显示垂直滚动条。用户可以使用滚动条来滚动查看全部文本内容。

调整滚动条的样式

通过CSS的滚动条伪类选择器，我们还可以自定义滚动条的样式。下面是一些常用的滚动条样式设置：

/* 设置滚动条的宽度和颜色 */
pre::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

/* 设置滚动条轨道的背景颜色 */
pre::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

/* 设置滚动条滑块的背景颜色 */
pre::-webkit-scrollbar-thumb {
  background-color: #888;
}

/* 鼠标悬浮在滚动条上时的样式 */
pre::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

通过上述样式设置，可以定制滚动条的宽度、颜色和轨道背景颜色，以及滑块的背景颜色。鼠标悬浮在滚动条上方时，还可以设置滑块的不同颜色，提高用户交互体验。

示例

下面的示例展示了如何使用CSS在pre标签上显示垂直滚动条。

<!DOCTYPE html>
<html>
<head>
  <style>
    pre {
      overflow: scroll;
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <pre>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum, neque eget posuere dictum, purus purus tincidunt mi, sed lacinia urna lectus quis nibh. Praesent elementum consectetur porttitor. Morbi tempus justo sed tortor tincidunt, non lobortis nunc consectetur. Duis posuere enim sed condimentum feugiat. Quisque tristique luctus quam, non ullamcorper turpis blandit at. Curabitur malesuada lectus ac purus feugiat egestas. Aliquam gravida metus enim, ut imperdiet felis auctor vel. Aenean ut tincidunt felis. Integer in diam magna. Vestibulum ac eros eu massa molestie eleifend. Sed tristique nibh ac erat faucibus, sit amet tincidunt orci efficitur.
  </pre>
</body>
</html>

上述示例中，我们设置了pre标签的宽度为300px，高度为200px，并设置了1px的边框和10px的内边距。当pre标签内的文本内容超过其高度时，垂直滚动条就会自动出现，用户可以通过滚动条来滚动查看全部文本内容。