如果第1行没有足够的文字，如何使跨度移动到第2行？

Question

看看这个jsbin https://jsbin.com/dipater/edit?html,css,output 我希望在两种情况下（容器1和2），跨度出现在第2行。如何实现这一目标？

x

Answer 1

我不确定你要做什么 - 但是如果要在链接到第二行后得到文本，那么只需将显示：块样式规则应用于a中的跨度。如果你愿意，你可以将它设置为不像链接 - 但实际上如果跨度不是链接的一部分 - 那么它应该移出<a>元素。

＆＃13;

＆＃13;

a span {display:block}

＆＃13;

  <div class="container-1 container">
    <a href="https://www.reddit.com/">this is some text <span class="no-style">more text</span></a>
  </div>
  <div class="container-2 container">
    <a href="https://www.reddit.com/">this is some text <span class="no-style">more text</span></a>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将span设置为display：block

Answer 3

有很多方法可以实现这一目标 一个是

.no-style {
    text-decoration: none;
    color: black;
    cursor: auto;
    display: inline-block;
    width: 100%;
}