How to Keep Anchor Text from going outside of Card?

[Scott]

I have this:

<section class="w3-half w3-container">
                    <h2 class="w3-center">Further Education</h2>
                    <div class="w3-card-4">
                        <h3 class="w3-container w3-theme-l1" style="margin-bottom:0">Books</h3>
                        <p class="w3-theme-l1 w3-container" style="margin-top:0;padding-top:1em">These books belong on the shelf of every serious student of pensions. Lowenstein's book is easily accessible to the general reader, while Ryan's and Waring's books are more technical.</p>
                      <ul class="w3-ul">
                          <li><a class="w3-button" href="https://www.amazon.com/While-America-Aged-Bankrupted-Financial/dp/0143115383/">Roger Lowenstein: While America Aged</a></li>
                        <li><a class="w3-button" href="http://www.ryanalm.com/Portals/0/newsletters/ThePesionCrisisBook.pdf">Ronald J. Ryan: The U.S. Pension Crisis</a></li>
                        <li><a class="w3-button" href="https://www.amazon.com/Pension-Finance-Putting-Defined-Benefit/dp/1118106369/">M. Barton Waring: Pension Finance</a></li>
                      </ul>

</section>

 

When the page is resized, the paragraph text stays inside the card, but the anchor text extends beyond it, which looks very ugly. I've tried setting class="w3-container" on each <a>, playing with the style word-wrap and ellipsis settings, but nothing has really helped. Any suggestions gratefully received.

Thanks,
Scott

[dsonesuk]

Change to different class other than " w3-button", it uses white-space: nowrap; which is causing the issue. DON'T adjust the w3-button class styling, it could be used somewhere else where it is required.

Edited September 19, 2017 by dsonesuk