在元素旁邊浮動的元素使用文本溢出

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

啊！大！樂意效勞。 –

在元素旁邊浮動的元素使用文本溢出

回答

相關問題