html - 在 Bootstrap 面板标题中使用带有 div 和 span 的省略号

Question

如何将按钮与文本 “Nulla vitae quam a velit dictum tincidunt. Maecenas...” 放在同一行？

我正在用这个

style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"

因此该行以面板大小结束。没有它，如果文本不够大，按钮和文本将保持在同一行。

http://jsfiddle.net/Khrys/4PHAE/

<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            <span>Nulla vitae quam a velit dictum tincidunt. Maecenas sed dapibus nunc.</span>
            <div class="btn-toolbar pull-right">
                <div class="btn-group">
                    <a href="#" class="btn btn-default btn-xs">?</a>
                    <a href="#" class="btn btn-default btn-xs">!</a>
                </div>
            </div>
        </div>
        <div class="panel-body text-center">
            <p class="lead" style="margin-bottom: 0px;">Description</p>
        </div>
        <div class="panel-footer" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><small>Iten #1, Iten #2, Iten #3, Iten #4, Iten #5, Iten #6, Iten #7, </small></div>
    </div>
</div>

Answer 1

您可以将按钮放在.panel-heading 之外因为它是强制 overflow:hidden 的元素然后给出 float 的属性或 display:inline-block到你的按钮和固定宽度的文本div。

HTML

<div class="panel panel-default">
    <div class="panel-heading" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
        <span>Nulla vitae quam a velit dictum tincidunt. Maecenas sed dapibus nunc.</span>
    </div>
    <div class="btn-toolbar pull-right">
        <div class="btn-group">
            <a href="#" class="btn btn-default btn-xs">?</a>
            <a href="#" class="btn btn-default btn-xs">!</a>
        </div>
    </div>
</div>

CSS

.panel {
  position:relative;
  width:200px;
}
.panel-heading {
  max-width:150px;
  float:left;
}
.btn-toolbar {
  width:50px;
  float:right;
}

查看此演示 http://jsfiddle.net/6ZpBL/2/