如何让手机视图上的溢出变小

Question

我正在开发我的instander 克隆 apk 网站。您可以看到我已将常见问题解答放在页面底部。这些常见问题解答在桌面视图中运行良好，但在移动视图中，它们的高度有所不同。我附上屏幕截图供您参考。

下面是我的示例代码

<div>
<Span class="ac1"> is instender worth it ?</span>
<span class="ac2"> Are Instander Pro and Instander the same app?</span>
</div>

现在对于第二个尺寸较大的手风琴，它在移动视图中消耗了 2 行。我想用 CSS 来压缩它。我尝试减小尺寸，但它会干扰 UI。

我尝试更改正面大小，尝试减少字体之间的间距。尝试修复跨度的宽度和高度，但文本超出了跨度元素。

Answer 1

我在我的一个在线购物网站上使用省略号来处理这个问题。请参阅我的产品卡的示例。

您可以使用此 CSS 实现省略号：

.acc1{
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13.6px !important;
    max-height: 37px;
    height: 37px;
}

如果每个跨度都有不同的类，那么您可以在 CSS 中使用正则表达式将此规则应用于所有元素。