W3.CSS - <button class="w3-button w3-block"> width and overflow help

[jdag]

I'm newer to design and I'm really enjoying the W3.CSS environment created. I started with a template from the main page and there's a section with accordion style buttons. I have a longer title on some of the buttons and I've noticed that when viewing on narrow viewports like my mobile phone the long title overflows and is just hidden. The buttons are multiple words so i was hoping that it could just make the button twice as tall if it needed to overflow into a 2nd line of text for the <button>. I can make what i want happen but wanted to ask the best way here first. My loose understanding of this W3.CSS environment is that it's very likely i should be able to get everything i might want by using the pre-defined classes so i could avoid having to manually chop up sections of the layouts and add some more code specific to individual buttons and stuff. anyways heres a snippet of the code. i started with the W3.CSS Pizza Restaurant Template. also if there's a w3.css class for 80% width that'd be good too. thanks!

 

                <button onclick="myAccFunc('SandwichesBurgers')" class="w3-padding-16 w3-theme w3-button w3-block w3-center w3-red w3-grayscale-min" style="width:80%;">
                    Burgers, Sandwiches, Subs & Wraps
                </button>
                <div id="SandwichesBurgers" class="w3-hide" style="width:80%;">
                    all served with your choice of homestyle fries or home made potato chips
                    <p class="w3-text-grey">
                        burgers, sandwiches, subs and wraps are an additional $1.00 after 4pm
                    </p>
                    <hr>