Question

目标是有一个标题部分，它包含两个文本字段：

名字
姓氏

规则很简单：

标题应该只有一行（没有换行）
第一个名称与标题
姓氏与标题右侧对齐
如果文字不合适，我希望用省略号
（更新）：我无法设置固定宽度（即px），因为标题可以显示在不同大小的众多设备上，从桌面显示器到iPhone

虽然规则很简单，但我根本无法弄清楚如何使用HTML / CSS。我一直在尝试两种方法：一种是浮动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/

HTML / CSS：无法使用文本省略号来处理两个并排的文本字段

1 个答案: