css 文字超出滚动

CSS 中，当文本内容超过其容器元素的宽度时，可以设置文字超出部分的行为。通常通过 `overflow` 属性控制。以下是几种常见的方式：

1. **自动滚动 (auto)**：默认值，如果内容溢出，浏览器会显示滚动条让用户查看全部内容。

   .scrollable {
     overflow: auto;
   }

2. **可见但隐藏 (visible but hidden, scroll)**：文本会保留超出的部分，但用户无法看到滚动条，需手动滚动才能查看。

   .hidden-scroll {
     overflow-y: scroll;
     scrollbar-width: none; /* 隐藏滚动条 */
     -ms-overflow-style: none; /* IE 和 Edge 的兼容 */
     scrollbar-color: transparent transparent; /* 自定义滚动条颜色 */
   }

   /* 可视化滚动条 */
   .hidden-scroll::-webkit-scrollbar {
     width: 4px;
   }

   .hidden-scroll::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.5);
   }

   /* 其他浏览器 */
   .hidden-scroll::-moz-scrollbar {
     width: 4px;
   }

   .hidden-scroll::-moz-scrollbar-thumb {
     background-color: rgba(0, 0, 0, 0.5);
   }

3. **不显示内容 (hidden)**：溢出的内容将被裁剪，用户看不到。

   .no-wrap {
     white-space: nowrap;
   }

4. **隐藏并截断 (ellipsis)**：超出部分用省略号表示。

   .text-overflow-ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box; /* WebKit browsers */
     -webkit-line-clamp: 3; /* 最多显示三行 */
     -webkit-box-orient: vertical;
     line-height: 1.5; /* 调整行高以适应省略号 */
   }