移动响应建议 - 根据溢出

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

这是一个非常基本的问题。我已在我的一个[在线购物网站][1] 上设置了此问题

如果您查看我的产品轮播，您会发现我使用了省略号。 [产品卡][2]

这是使用简单的CSS实现的

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

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

使用Ellipses是处理此类情况最专业的方法 [1]：https://www.shoppingjin.pk/ [2]：https://i.sstatic.net/A2KujlZ8.png