Toby Toby - 5 months ago 33
jQuery Question

Collapsable List - Display all title using multiline

I am having trouble modifying the following code to make it display correctly on mobile, I copied it from W3 Schools collapsable lists tutorial and modified it correctly for desktop.

However on mobile half the writing gets cut off by an ellipsis.

Desktop

Desktop Image

Mobile

Mobile Image

Any and all help would be greatly appreciated.
Ideally I would like to make the title section span across multiple lines.

See below code for more information.



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">

<div data-role="collapsible">
<h4>Do I need to buy now?</h4>
No. Sign up for a free 30-day trial now. With NO obligations.
</div>

<div data-role="collapsible">
<h4>Is the free trial fully functional?</h4>
Yes. The free trial comes with all of S2L features. You can give it a test run before you buy.
</div>

<div data-role="collapsible">
<h4>Do I need a credit card to sign up for the trial?</h4>
No. We do not collect payment information until you are ready to buy.
</div>

<div data-role="collapsible">
<h4>Do you provide a discount for yearly plans?</h4>
Yes. You save 10% if you choose to pay yearly.
</div>

<div data-role="collapsible">
<h4>How do I activate my trial to a paid version?</h4>
Once you have entered your payment information, you will receive an activation code by mail. <br>
Enter the code into the application and you are ready to go.
</div>

</div>
</body>
</html>




Answer

Well right now it is using an ellipsis with white-space: nowrap; on the overflow rather than breaking to a new line. Give your text a white-space: normal;.

CSS:

#pageone > div a {
  white-space: normal;  
}

#pageone > div a {
  white-space: normal;  
}
<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>

    <div data-role="page" id="pageone">

        <div data-role="collapsible">
        <h4>This title is super long and will overflow to a new line instead of using an ellipsis.</h4>
    No. Sign up for a free 30-day trial now. With NO obligations.
        </div>

        <div data-role="collapsible">
        <h4>This title is super long and will overflow to a new line instead of using an ellipsis.</h4>
    Yes. The free trial comes with all of S2L features. You can give it a test run before you buy.
        </div>

        <div data-role="collapsible">
        <h4>This title is super long and will overflow to a new line instead of using an ellipsis.</h4>
    No. We do not collect payment information until you are ready to buy.
        </div>

        <div data-role="collapsible">
        <h4>This title is super long and will overflow to a new line instead of using an ellipsis.</h4>
         Yes. You save 10% if you choose to pay yearly.
        </div>

        <div data-role="collapsible">
        <h4>This title is super long and will overflow to a new line instead of using an ellipsis.</h4>
    Once you have entered your payment information, you will receive an activation code by mail. <br>
    Enter the code into the application and you are ready to go.
        </div>

      </div>
    </body>
    </html>