html - 在 float 情况下换行文本 (css)

Question

我有以下代码

HTML:

<div>
   <h3> Lorem ...</h3>
   <a>some link</a>
</div>

CSS:

a {
    float: left;
}

h3 {
    display: inline-block;
}

如果有足够的水平空间，两个元素会很好地并排放置，但如果没有足够的空间， anchor 会被向下推(这不是我想要的)我希望看到 h3 元素的换行代替。此外，元素内的文本可以是任何内容，这意味着它们的宽度是可变的。有什么建议吗？

JSFIDDLE

Answer 1

要么

h3{
     white-space: nowrap;
     overflow: hidden;
     text-overflow: hidden;
}

或者给它们宽度

h3{
      width:50%;
}

a{
     width:50%;
}

或者你想要的任何值，这样他们就不会越界