链接文本大于父级答案

【问题标题】：Link text larger than parent链接文本大于父级
【发布时间】：2013-09-03 08:57:00
【问题描述】：

我有一个 div，这个 div 里面是一个链接

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

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

我想要的是文本换行。

我该如何解决这个问题？

【问题讨论】：

标签： html css

【解决方案1】：

使用 CSS word-break 规则。

a {
    word-break:break-all;
}

jsFiddle example

【讨论】：

【解决方案2】：

试试这个

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

JsFiddle Demo

【讨论】：

【解决方案3】：

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

a{
    word-break: break-all;
}

正如this documentation 解释的那样，这将起作用

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

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

【讨论】：