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

宽度为左手元件被限定为使得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>

来源

2013-04-03 ryan

你能澄清你的意思是你的说法＃1 – unitario

什么能元素的顺序被改变？ –

我有涉及包装你一个初步的解决方案片断在div：

<div class="wrapper"> 
    <span class="article-title" title="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: blockarticle-title元素并允许一个right-margin值足以防止测试在按钮下面流动。

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

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

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

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

来源

2013-04-03 16:37:07

完美，谢谢！ – ryan

啊！大！乐意效劳。 –

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

回答

相关问题