我希望将位于
<a>
标签中的文本适应固定的 div 容器,但它会破坏该容器并显示得很难看。
有一个CSS3属性: word-wrap: break-word
更多信息请查看MDN word-wrap文档。
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>
我通过使用 display:block
解决了问题。
a{
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
display:block;
}
在IE中对我有效
我有一个解决方案,可以通过设置锚点标签的display:list-item
属性,使word-wrap: break-word
在IE中生效。
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;
}