Html 在引导面板标题中使用带div和span的省略号

如何将按钮与文本“nullavitae quam a velit dictum tincidunt.Maecenas…”放在同一行中

我在用这个

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

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

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

没有生命是一种神圣的信念。梅塞纳斯·塞德·达皮布斯·努克。
说明

第1，第2，第3，第4，第5，第6，第7，

您可以将按钮放在

面板标题之外，因为它是强制执行
溢出：隐藏
的元素，然后为按钮和文本div指定一个固定宽度的
float
或
display:inline block
属性

HTML

查看此演示
您可以将按钮放在
面板标题
之外，因为它是强制执行
溢出：隐藏
的元素，然后将
浮动
或
显示：内联块
属性赋予按钮和固定宽度的文本div

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

HTML

查看此演示

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