Question

我有三个问题。

需要定义左手元素的宽度，以使text-overflow: ellipsis生效
向右浮动的控件始终在线上可见，而不是由左手元素向下推。
此HTML组的容器具有可调整大小，因此无法修复文章标题的大小。控件总是大约160px。

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

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块元素并使用absolute定位将pull-right div放置在包装器的右侧和顶部。

然后display: block article-title元素，并允许right-margin值足以阻止测试在按钮下流动。

text-overflow: ellipsis正在运作，但由于文字不够长，你没有看到效果。

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

这应该非常接近你所需要的。

小提琴参考：http://jsfiddle.net/audetwebdesign/PmUje/

使用文本溢出与元素浮动在它旁边

1 个答案: