html - 如何自动换行 <a> 标签的文本？

Question

我在文档中有一个标签，显示文本是一个相当长的电子邮件地址。在较小的显示器(如电话)上，电子邮件地址卡在它所在的容器外面。我怎样才能让它换行？我可能容器本身设置错误，但不知道要更改什么。这是我针对该特定区域的代码:

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

我试过在#facebook ID 内进行自动换行，我也试过将电子邮件地址的文本放在一个单独的 div 中，它有自己的类或 ID。我做错了什么？

Answer 1

在您的 CSS 中，您可以将 word-break: break-all; 替换为 overflow-wrap: break-word;。应该这样做:)

来源:CSS Tricks .