how to split sentence in button-CodePudding

so i want to make big button with name "insert file audio (mp3)" in 1 line or 2 line but what i can made it's become 4 line which is every word have 1 line.

can someone help me to make button with name? option 1 : insert file audio (mp3)

option 2 : insert file audio (mp3)

and here's my code :

<button type="button"  style="background-color: #e7ab6f; padding: 20px 120px; color: white;">
                        <i  style="font-size: 50pt;">audiotrack</i>
                        <p style="font-weight: bold; color: white;">Insert file audio (mp3)</p>
                    </button>

CodePudding user response：

Your code is correct, it is showing the whole name in 1 line. I am copy pasting your code, it is running as you wanted it to.

<button type="button"  style="background-color: #e7ab6f; padding: 20px 120px; color: white;">
                        <i  style="font-size: 50pt;">audiotrack</i>
                        <p style="font-weight: bold; color: white;">Insert file audio (mp3)</p>
                    </button>

Or maybe I have misunderstood your question, can you tell me what exactly you want your code to do?

If you want the name to appear in separate lines then you can use multiple <p> tags like this:

<button type="button"  style="background-color: #e7ab6f; padding: 20px 120px; color: white;">
                        <i  style="font-size: 50pt;">audiotrack</i>
                        <p style="font-weight: bold; color: white;">Insert</p>
                        <p style="font-weight: bold; color: white;">file</p>
                        <p style="font-weight: bold; color: white;">audio</p>
                        <p style="font-weight: bold; color: white;">(mp3)</p>
                    </button>