如何在 <a> 标签 wordwrap 中制作文本答案

【问题标题】：How to make text in <a> tag wordwrap如何在 <a> 标签 wordwrap 中制作文本
【发布时间】：2012-01-10 07:48:46
【问题描述】：

我想让<a> 标记中的文本适合固定的 div，但它会破坏 div 并显示丑陋。

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

查看MDN word-wrap docs 了解更多信息。

【讨论】：

可以做一个锚标签吗？我尝试了很多但没有得到 word-wrap:break-word 在 IE 中应用

【解决方案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;
    }

&lt;pre&gt;&lt;a href="#"&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa&lt;/a&gt;&lt;/pre&gt;

【讨论】：

【解决方案3】：

我得到了一个解决方案，通过设置 Anchor 标签的 display:list-item，使 word-wrap: break-word 在 IE 中对 Anchor 标签有效。

【讨论】：

【解决方案4】：

您可以通过下面的 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;

}

【讨论】：

【解决方案5】：

我通过使用 display:block in 得到了解决方案

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

 }

它在 IE 中对我有用

【讨论】：

你有多余的“空白”，这意味着只有第二个“空白：正常；”被应用