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

在CSS中，您可以将word-break: break-all;换成overflow-wrap: break-word;。那应该做：）

来源：CSS Tricks。

Answer 2

您需要使用以下自动换行功能

#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>

我如何自动换行<a> tag?

2 个答案: