Question

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

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

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

我想要的是文本分成一个新行。

我该如何解决这个问题？

Answer 1

使用CSS word-break规则。

a {
    word-break:break-all;
}

<强> jsFiddle example

Answer 2

试试这个

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

JsFiddle Demo

Answer 3

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

a{
    word-break: break-all;
}

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

除了“普通”软包装机会之外，任何两个字母之间的行都可能断开（除了'换行'属性禁止的地方除外）。不应用连字符。

每当文本到达容器的边界时，这将强制分割单词，从而打开一个新行。

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

链接大于父级的文本

5 个答案: