如何在<a> tag wordwrap</a>中制作文字

Question

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

Answer 1

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

请查看MDN word-wrap docs了解详情。

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>

Answer 3

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

Answer 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;

}

Answer 5

我通过使用display：block来解决

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

 }

它在IE中对我有用