引导面板标题:标题文本右侧带有省略号和按钮

Question

如果文本太长，按钮会向下移动。我希望有：

• 按钮仍然在右侧，并且始终位于同一顶层
• 在按钮之前缩短文本（省略号）

这可能吗？

.panel-heading h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
}

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
With short text it works great!
            <button class="btn btn-default pull-right">
                New
            </button>
        </h3>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
But with long text, the button is lower: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
            <button class="btn btn-default pull-right">
                New
            </button>
        </h3>
        <div class="clearfix"></div>
    </div>
    <div class="panel-body">
        Panel content
    </div>
  </div>

Answer 1

将

pull-left添加到h3标签中。

<h3 class="panel-title pull-left">

为您的 CSS 设置width和padding-top。宽度可防止h3内容占据面板的整个宽度（根据您的喜好进行调整），并且padding-top将其向下推一点，使其与您的按钮更加内联。

.panel-heading h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    width: 75%;
    padding-top: 8px;
}

将按钮移到h3标记之外。

<h3 class="panel-title pull-left">With short text it works great!</h3>
<button class="btn btn-default pull-right">New</button>

下面是代码片段中所有内容的结果。

.panel-heading h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  width: 75%;
  padding-top: 8px;
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title pull-left">
With short text it works great!
            </h3>
    <button class="btn btn-default pull-right">New</button>
    <div class="clearfix"></div>
  </div>
  <div class="panel-body">Panel content</div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title pull-left">
But with long text, the button is lower: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        </h3>
    <button class="btn btn-default pull-right">New</button>
    <div class="clearfix"></div>
  </div>
  <div class="panel-body">Panel content</div>
</div>