右侧带有控件的 CSS 栏

Question

Here's a nice jsFiddle illustrating the problem

我正在尝试创建一个标题栏元素...

• 永远只有 1 行高
• 在右上角有始终存在的控件
• 在左上角有一个标题，如果太长会被截断为“...”

有谁知道我将如何解决这个问题？我有点难过。

.item {
    border: 1px solid grey;
    display: inline-block;
    margin-right: 1em;
    width: 25%;
}

.titlebar {
    background: red;
    overflow: hidden;
    padding: 0.5em;
    text-overflow: ellipsis;
}

.title {
    overflow: hidden;
    white-space: nowrap;
}

i {
    font-style: normal;
    float: right;
}

.content {
    min-height: 15em;
}

<div class="item">
    <div class="titlebar">
        <span class="title">My title</span>
        <span class="controls">
            <i>-</i><i>+</i><i>X</i>
        </span>
    </div>
    <div class="content">
        This is the most simple use-case - a nice short title, everything works tickety-boo.
    </div>
</div>

<div class="item">
    <div class="titlebar">
        <span class="title">My title which is just right...</span>
        <span class="controls">
            <i>-</i><i>+</i><i>X</i>
        </span>
    </div>
    <div class="content">
        This is how it should look if the title is too long (obviously this title is just the right length, but pretend there are other words after it).
    </div>
</div>

<div class="item">
    <div class="titlebar">
        <span class="title">My title which is really far too long for a sensible title to be</span>
        <span class="controls">
            <i>-</i><i>+</i><i>X</i>
        </span>
    </div>
    <div class="content">
        This is the problem: the title is way longer than can fit, and it pushes the buttons down on to a second line.
    </div>
</div>

Answer 1

对于没有固定大小的解决方案，更改 html 中 .title 和 .controls 的顺序。这可确保当您在 .controls 上设置 float: right 时，控件将首先呈现并出现在第一行。在此之后你需要有 overflow: hidden, text-overflow: ellipsis, white-space: nowrap 和 display: block 在 .title

上

我已经更新了您的示例以反射(reflect)这一点。

.item {
    border: 1px solid grey;
    display: inline-block;
    margin-right: 1em;
    width: 25%;
}

.titlebar {
    background: red;
    overflow: hidden;
    padding: 0.5em;
}

.title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;  
    display: block;
}

i {
    font-style: normal;
    float: right;
}

.content {
    min-height: 15em;
}

.controls {
  float: right;
}

<div class="item">
    <div class="titlebar">
        <span class="controls">
            <i>-</i><i>+</i><i>X</i>
        </span>
        <span class="title">My title</span>      
    </div>
    <div class="content">
        This is the most simple use-case - a nice short title, everything works tickety-boo.
    </div>
</div>

<div class="item">
    <div class="titlebar">
        <span class="controls">
            <i>-</i><i>+</i><i>X</i>
        </span>
        <span class="title">My title which is just right...</span>      
    </div>
    <div class="content">
        This is how it should look if the title is too long (obviously this title is just the right length, but pretend there are other words after it).
    </div>
</div>

<div class="item">
    <div class="titlebar">
        <span class="controls">
            <i>-</i><i>+</i><i>X</i>
        </span>
        <span class="title">My title which is really far too long for a sensible title to be</span>      
    </div>
    <div class="content">
        This is the problem: the title is way longer than can fit, and it pushes the buttons down on to a second line.
    </div>
</div>