如何使<a>标签中的文本自动换行

Question

我希望将位于 <a> 标签中的文本适应固定的 div 容器，但它会破坏该容器并显示得很难看。

- hungneox

Answer 1

有一个CSS3属性： word-wrap: break-word

更多信息请查看MDN word-wrap文档。

- Chris Fulstow

---

在一个锚点标签中是否可能使用 word-wrap:break-word 属性？我尝试了很多次但在IE中似乎无法奏效。 - Shafeeque

Answer 2

pre {
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
      width: 30px;
    }

<pre><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></pre>

- Subha

Answer 3

我通过使用 display:block 解决了问题。

a{
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal;
            display:block;

 }

在IE中对我有效

- VINAY SAGAR

---

您有冗余的“空格”，这意味着只有第二个“white-space: normal;”被应用。 - Davbog

Answer 4

我有一个解决方案，可以通过设置锚点标签的display:list-item属性，使word-wrap: break-word在IE中生效。

- Shafeeque

Answer 5

您可以通过以下 CSS 将文本包装在标签中。

a {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

- Muhammad Usama