移动<a> tag to new line if it&#39;s content flows out of the first line?</a>

Question

我正在尝试实现以下功能，如果内容从一行流向另一行，请将标记移动到新行，这样您就可以看到我在这里的含义http://jsfiddle.net/sNyzX/第一个例子（红色）显示我有的情况现在和第二个示例（橙色）显示所需的效果，但没有<br>标记。这可以通过简单的html和css实现，如果不是jQuery解决方案也可以。

<div id="example1">
    Hi there This is some text and <a href="#"> this is the link! </a>
</div>

<div id="example2">
    Hi there This is some text and <br> <a href="#"> this is the link! </a>
</div>

CSS：

#example1 {
    background: red;
    width: 145px;
}

#example2 {
    background: orange;
    width: 145px;
    margin-top: 20px;
}

Answer 1

添加：

a {
    white-space: pre;
}

Answer 2

是的，你可以！

刚刚放

#example1 a {
    display: block   
}

jsFiddle here

Answer 3

我认为你应该使用

 word-break:break-word;

长话以闯入。

#example1 {
    background: red;
    width: 145px;
    word-break:break-word;
}

JS Fiddle Demo

Answer 4

将其添加到样式表

#example1 a {
    white-space: nowrap;
}

Answer 5

只需将链接的显示属性设置为阻止，它就会始终将链接移动到新行。

#example1 a {
    display: block;
}

您可以查看此页面以了解展示属性的工作原理： http://www.tutorialrepublic.com/css-tutorial/css-display.php