html - 链接文本大于父级

Question

我有一个 div，在那个 div 里面是一个链接

<div class="something">
<a href="#">Databases</a>
</div>

问题是当我设置我的 div 的宽度时，小于链接文本的宽度。链接的文本只是在父 div 之外。

我想要的是文本换行。

我怎样才能解决这个问题 ？

Answer 1

使用 CSSword-break规则。

a {
    word-break:break-all;
}

jsFiddle 示例

Answer 2

尝试这个

a{
    white-space: pre-wrap;
    word-wrap: break-word; 
}

JsFiddle 演示

Answer 3

您应该使用word-break锚<a>标记上的属性。

a{
    word-break: break-all;
}

正如本文档所解释的，这将起作用，因为

除了“正常”的软换行机会外，任何两个字母之间的行可能会中断（“换行”属性禁止的情况除外）。不应用连字符。

这将在文本到达容器边界时强制单词拆分，并换行。

Answer 4

您可以使用 CSS 告诉浏览器将单词分解为多个单词：

.something{word-wrap: break-word;}

Answer 5

.something a {
    /* see http://stackoverflow.com/a/7256972/315935 for details */
    word-wrap: break-word;      /* IE 5.5+ and CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: pre-wrap;      /* CSS3 */
    overflow: hidden;
    height: auto !important;
    vertical-align: middle;
}