twitter-bootstrap 在引导面板标题中使用带有 div 和 span 的省略号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19682169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using ellipsis with div and span in bootstrap panel title
提问by Khrys
How can I put the buttons in the same line as the text "Nulla vitae quam a velit dictum tincidunt. Maecenas..."?
如何将按钮与文本“Nulla vitae quam a velit dictum tincidunt. Maecenas...”放在同一行？
I am using this
我正在使用这个
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
so the line ends in the panel size. Without it, and if the text isn't big enough, the buttons and the text stay in the same line.
所以该行以面板大小结束。没有它，如果文本不够大，按钮和文本将保持在同一行。
http://jsfiddle.net/Khrys/4PHAE/
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>
回答by DaniP
You can put the buttons outside the .panel-headingbecause it's the element that force the overflow:hiddenand then give a property of floator display:inline-blockto your button and text divs with fixed width.
您可以将按钮放在 the 之外，.panel-heading因为它是强制的元素，overflow:hidden然后为您的按钮和具有固定宽度的文本 div 提供float或的属性display:inline-block。
HTML
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
CSS
.panel {
position:relative;
width:200px;
}
.panel-heading {
max-width:150px;
float:left;
}
.btn-toolbar {
width:50px;
float:right;
}
Review this Demo http://jsfiddle.net/6ZpBL/2/
