Question

我有以下代码

HTML：

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

CSS：

a {
    float: left;
}

h3 {
    display: inline-block;
}

如果有足够的水平空间，两个元素彼此相邻，但如果没有足够的空间，锚被推下（不是我想要的）我希望看到 h3 元素＆＃39; s文本换行。此外，元素内部的文本可以是任何内容，这意味着它们的宽度是可变的。有什么建议吗？

Answer 1

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

或给他们宽度

h3{
      width:50%;
}

a{
     width:50%;
}

或者你想要的任何价值，以便他们不会离开他们的边界

Answer 2

我并不完全理解你想要输出的方式，我已经给出了两个输出。

1） <h3>和<a>标记并排无宽：

您可以使用不需要宽度的display:table属性

<强> DEMO

CSS：

div
{
  display:table;
}

a {

    display:table-cell;
}

h3 {
    display: table-cell;

}

2） <a>标记继续<h3>标记中的文字：

您可以使用display:inline

<强> DEMO

CSS：

a {
    display:inline;
}

h3{
   display:inline;  
}

Answer 3

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

Answer 4

float在DOM树中较高的元素上不起作用。（链接未在h3的文本内容下被推下的唯一原因是您确实将后者显示为inline-block。）

如果您可以在h3之前放置链接，那么很容易（您只需要从inline-block删除h3） - http://jsfiddle.net/ygnbgL7k/9/

编辑：

[来自评论]：但该解决方案的唯一问题是包装文本从下一行的开头（在浮动锚点下）开始。

如果您不想这样，请添加

h3 { overflow:hidden; }