0

我有三个问题。

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

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

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>
4

1 回答 1

2

我有一个暂定的解决方案，涉及将您的代码段包装在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-rightdiv 放置在包装器的右侧和顶部。

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

正在工作，text-overflow: ellipsis但由于文本不够长，您没有看到效果。

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

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

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

于 2013-04-03T16:37:07.717 回答