How to make an overflowing according smaller on mobile view

I am working on my instander clone apk website. You can see that I have placed the FAQ at the bottom of my page. These FAQs work fine in desktop view, but in mobile view, their height varies. I am attaching the screenshot for your reference.

below is my sample code

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

Now for the second accordion which has a large size, it consumes 2 lines in the mobile view. I want to compact it using CSS. I tried reducing the size but it disturbs the UI.

I tried changing front size, tried reducing space between font. tried fixing the width and height of the span, but text goes beyond the span element.

Solution

I am using ellipses to deal with this on one of my online shopping websites. See an example of my Product Card.

You can implement ellipses with this CSS:

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

If you have different classes for each span, then you can use regex in CSS to apply this rule to all elements.