1

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>

3
  • Here is the link to the W3 schools tutorial mentioned above: w3schools.com/jquerymobile/…
    – Toby
    Jun 20, 2016 at 15:52
  • Not sure what the issue is. I don't see any text cut off in the screenshot in the link.
    – db_brad
    Jun 20, 2016 at 16:03
  • @db_brad, his images links are squished together, so you probably only clicked on the desktop one. Jun 20, 2016 at 16:16

1 Answer 1

1

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>

2
  • 1
    Perfect, thanks for the education Hunter you are a legend!
    – Toby
    Jun 20, 2016 at 17:13
  • Haha! No problem bud :) Jun 20, 2016 at 17:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.