jquery - 如果内容从第一行流出，将标签移动到新行？

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

score 3 · Accepted Answer

3

添加：

a {
    white-space: pre;
}

于 2013-05-18T13:54:59.283 回答

score 2 · Accepted Answer

2

是的你可以！

就放

#example1 a {
    display: block   
}

jsFiddle在这里

于 2013-05-18T13:57:30.250 回答

score 1 · Accepted Answer

我认为你应该使用

 word-break:break-word;

长词分成几行。

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

JS 小提琴演示

score 1 · Accepted Answer

1

将此添加到您的样式表

#example1 a {
    white-space: nowrap;
}

于 2013-05-18T14:02:37.583 回答

score 0 · Accepted Answer

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

#example1 a {
    display: block;
}

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

jquery - 如果内容从第一行流出，将标签移动到新行？

5 回答 5

Related

Reference