HTML/CSS : Cannot get text-ellipsis to work with two side-by-side text fields

Question

目标是有一个标题部分，它由两个文本字段组成:

• 名字
• 姓氏

规则很简单:

• 标题应该只有一行(不要换行)
• 名字在标题的左侧对齐
• 姓氏在标题右侧对齐
• 如果文本不适合，我希望用省略号截断姓氏
• (更新):我无法设置固定宽度(即 px)，因为标题可以显示在多种不同尺寸的设备上，从桌面显示器到 iPhone

虽然规则很简单，但我就是不知道如何用 HTML/CSS 来实现。我一直在尝试两种方法:一种使用 float P，另一种使用 TABLE 和 TD。既不工作。请参阅下面的 HTML/CSS 和 JSFiddle:

HTML

<!-- First Attempt: With DIV -->
<div class="header">
    <div class="header-container">
        <p class="header-text first">First Name</p>
        <p class="header-text last">Long last name: xxx xxx xxx xxx xxx xxx</p>
    </div>
</div>

<br/>

<!-- Second Attempt: With TABLE -->
<div class="header">
    <table class="header-container">
        <tr>
            <td class="header-text first">First Name</td>
            <td class="header-text last">Long last name: xxx xxx xxx xxx xxx xxx</td>
        </tr>
    </table>
</div>

CSS

DIV.header {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-color: yellow;
}

/* ----- First Attempt ----- */
DIV.header-container {
    white-space: nowrap; /*prevent header from line breaking*/
}

P.header-text {
    font-size: 32px;
    white-space: nowrap; /*prevent each text block from line breaking*/
}

P.first {
    float: left; /*align to left*/
}

P.last {
    float: right; /*align to right*/
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Second Attempt ----- */
TD.header-text
{
    font-size: 32px;
    white-space: nowrap; /*prevent each text block from line breaking*/
}

TD.first {
    width: 100%; /*take up all the space, so last name is right-aligned*/
}

TD.last {
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

Demo

我错过了什么？为什么上面的方法不起作用？

Answer 1

宽度在这里很重要。

P.header-text {
    font-size: 32px;
    white-space: nowrap; 
    width:50%;
}

可在此处访问新的 JSFiddle:http://jsfiddle.net/g4gTG/3/