在使用WooCommerce搭建的WordPress商店中，许多商家会遇到这样一个问题：简短描述区域内容过长，导致部分文字被截断或无法完整显示。那么，如何让简短描述区域内容超过最大高度后可以滚动显示呢？今天，我们就来分享两种简单的CSS技巧，帮你解决这个问题，让用户能够流畅查看完整的简短描述内容。

使用CSS设置最大高度并添加滚动条

操作步骤：

1. 确定简短描述的CSS选择器
2. 在大多数WooCommerce产品页面中，简短描述通常是通过类名 woocommerce-product-details__short-description 来展示的。所以，我们只需要选中这个类并应用样式。
3. 添加CSS代码
4. 下面是一个简单的CSS代码示例，通过这个代码，你可以设置简短描述的最大高度，并在内容超出时自动显示滚动条。

/* 基础滚动条设置 */
.woocommerce-product-details__short-description {
    max-height: 150px;  /* 限制容器高度 */
    overflow-y: auto;   /* 内容溢出时显示垂直滚动条 */
    padding-right: 5px;  /* 避免滚动条遮挡文字（可选） */
}

/* 自定义滚动条样式（仅支持Webkit内核浏览器） */
.woocommerce-product-details__short-description::-webkit-scrollbar {
    width: 8px;         /* 滚动条宽度 */
}
.woocommerce-product-details__short-description::-webkit-scrollbar-thumb {
    background-color: darkgrey;  /* 滑块颜色 */
    border-radius: 10px;         /* 滑块圆角 */
}
.woocommerce-product-details__short-description::-webkit-scrollbar-track {
    background: #f1f1f1;         /* 轨道背景色 */
}

1. 在哪儿插入CSS代码

• Elementor Pro用户： 你可以直接在Elementor的自定义CSS区域插入上述代码。
• 其他用户： 如果你使用的是免费的Elementor或没有使用Elementor，你可以将代码添加到WordPress后台的外观 > 自定义 > 额外CSS中。

1. 保存并查看效果

完成操作后，刷新你的产品页面，你就会看到简短描述区域已经显示了滚动条。当文字内容超出设定的最大高度时，用户可以通过滚动查看完整描述。