html - 使用文本溢出，元素漂浮在它旁边

Question

我有三个问题。

1. 需要定义左侧元素的宽度，以便 text-overflow: ellipsis 生效
2. 向右浮动的控件始终在线可见，不会被左侧元素压下
3. 这组 HTML 的容器是可调整大小的，因此文章标题的大小无法固定。不过控件将始终为 ~160px。

这组 HTML 的容器是可调整大小的。拖动 this fiddle 的结果 Pane 这正是它在我当前应用程序中的工作方式。

CSS

.article-title {
    float: left;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 85%;
}
.pull-right {
    float: right;
}
.browse-issue {
    margin-right: 1ex;
}

HTML

<span class="article-title" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a.">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a.</span>
<div class="pull-right">
    <button type="button" class="browse-issue btn" style="">Browse Issue</button>
    <button type="button" class="print btn"><i class="icon-print"></i></button>
</div>

Answer 1

我有一个初步的解决方案，涉及将您的片段包装在 div 中:

<div class="wrapper">
    <span class="article-title" title="Lorem ipsum dolor sit amet...">Lorem ipsum dolor sit amet...</span>
    <div class="pull-right">
        <button type="button" class="browse-issue btn" style="">Browse Issue</button>
        <button type="button" class="print btn"><i class="icon-print"></i></button>
    </div>
</div>

可以设置如下样式:

.wrapper {
    outline: 1px dotted red;
    position: relative;
    padding-right: 0px;
}
.article-title {
    display: block;
    margin-right: 170px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: 1px solid blue;
}
.pull-right {
    position: absolute;
    top: 0;
    right: 0;
    outline: 1px dotted blue;
}
.browse-issue {
    margin-right: 1ex;
}

您可以忽略 outline 样式，我将它们放入以帮助我查看元素框。

诀窍是定义一个wrapper block 元素并使用absolute 定位将pull-right div 放置在包装器。

然后您display: block article-title 元素并允许right-margin 值足以防止测试在按钮。

text-overflow: ellipsis 可以正常工作，但由于文本不够长，您看不到效果。

我还调整了 line-height，但这是可选的。

这应该非常接近您的需要。

fiddle 引用:http://jsfiddle.net/audetwebdesign/PmUje/