css 超出文本一行隐藏 展示展开按钮

CSS 中可以使用 `text-overflow` 和 `white-space` 属性结合 `::after`伪元素来实现超出文本行的隐藏并显示展开按钮。这通常用于长文本列表或者需要节省空间的情况。步骤如下：

1. 首先设置容器元素的样式，例如：

   .content {
     width: 200px; /* 设置容器宽度 */
     white-space: nowrap; /* 文本不换行 */
     overflow: hidden; /* 文本超出部分隐藏 */
     text-overflow: ellipsis; /* 如果有多余文字，则显示省略号 */
   }

2. 然后创建一个指向内容外部的 `::after`伪元素，作为展开按钮：

   .content::after {
     content: '\25be'; /* '▾' 或者其他的展开图标 */
     display: inline-block;
     cursor: pointer; /* 鼠标悬停时变为手形 */
     margin-left: 4px; /* 根据需求调整距离 */
     transition: transform 0.3s ease; /* 可选的过渡效果 */
   }

   .content:hover::after {
     transform: rotate(90deg); /* 当鼠标悬停时旋转展示更多内容 */
   }

当用户点击这个按钮时，可以根据实际需求（比如 JavaScript 动作）来显示或隐藏更多的内容。