如何对<a>标签</a>的文字进行自动换行<a>？</a>

Question

I have an tag in a document, and the display text is a fairly long email address. On smaller displays (like a phone) the email address hangs outside the container it's in. How can I make it wrap? I've probably got the container itself setup wrong, but can't figure out what to change. Here is my code for that particular area:

 #facebook { background-color: lightgray; width: 55%; border: 10px solid darkred; padding: 15px; position: absolute; left: 23%; top: 10%; text-align: center; } .word-break { word-break: break-all; } 

 <div id="facebook"> <h1>Contact Blackbird Music</h1> <br> <h2>Email: <a class="word-break" href="mailto:blackbirdmusicacademy@gmail.com">blackbirdmusicacademy@gmail.com</a></h2> <h2>Phone: <a href="tel:+17703175855">(770) 317-5855</a></h2> <h2>Filler Text Filler Text Filler Text Filler Text</h2> <h2>Filler Text Filler Text Filler Text Filler Text</h2> <h2>Filler Text Filler Text Filler Text Filler Text</h2> <h2>Filler Text Filler Text Filler Text Filler Text</h2> </div> 

I've tried the word-wrap inside the #facebook ID, and I've also tried putting the text of the email address inside a separate div with its own class or ID. What am I doing wrong?

Answer 1

In your CSS, you can swap out word-break: break-all; with overflow-wrap: break-word; . That should do it :)

Source: CSS Tricks .

Answer 2

You need to use word-wrap as below

 #facebook { background-color: lightgray; width: 55%; border: 10px solid darkred; padding: 15px; position: absolute; left: 23%; top: 10%; text-align: center; } .word-break { word-wrap: break-word; } 

 <div id="facebook"> <h1>Contact Blackbird Music</h1> <br> <h2>Email: <a class="word-break" href="mailto:blackbirdmusicacademy@gmail.com">blackbirdmusicacademy@gmail.com</a></h2> <h2>Phone: <a href="tel:+17703175855">(770) 317-5855</a></h2> <h2>Filler Text Filler Text Filler Text Filler Text</h2> <h2>Filler Text Filler Text Filler Text Filler Text</h2> <h2>Filler Text Filler Text Filler Text Filler Text</h2> <h2>Filler Text Filler Text Filler Text Filler Text</h2> </div>