Question

我需要创建一个设计，最终用户将看到包含两个组件的单行文本。 text-align:left div可以包含任意长度的文字。 text-align:right div一般约为9或10个字符，但可能会高达20个字符。

以下是最终用户需要看到的内容：

text-align:left文字应使用ellipsis在一行文字中隐藏任何不适合屏幕的文字。
text-align-right文字应始终位于同一行的屏幕上。
text-align:left div的宽度应等于浏览器窗口的宽度减去text-align:right文字div的宽度。
text-align:right div的宽度应等于其中文字的宽度加上其水平padding。
文本需要在行的中间垂直居中。

我差不多用fiddle工作了，但我需要为text-align:right div使用固定宽度。这是HTML：

<body>
    <div id="wrap">
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
        <div id="right">Right</div>
    </div>
</body>

这是CSS：

* {border:0; margin:0; padding:0;}

html, body {background-color:gray; height:100%; width:100%}

#left, #right {padding:5px;}

#left {
    background-color:red;
    float:left;
    text-align:left;
    width:calc(100% - 120px); /* deducted amount = width of #right + total horizontal padding*/

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#right {
    background-color:orange;
    float:right;
    text-align:right;
    white-space: nowrap;
    width:100px;
}

我可以想象在这里跳转到JQuery并让它根据width div的宽度设置text-align:right的两个div，但我会如果可能的话，我更喜欢用CSS来解决这个问题。

之前我尝试使用display:table和display:table-cell来实现这一点，但我遇到了ellipsis与table-cell一起使用的各种问题。 Using table-layout:fixed未正确显示ellipsis，display:block也没有，setting a max-width也没有。我很乐意使用table-cell，如果可以的话。

那么有没有办法使用纯CSS？

Answer 1

1）从左侧div中删除float:left并

2）在左侧div上添加display:block

和宾果游戏！ - 正确的div只占用它所需的空间 - 而不再给它一个固定的宽度。

UPDATED FIDDLE + FIDDLE 2 （只是为了证明它有效）

标记

<div id="wrap">
        <div id="right">Right</div>
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div> 
</div>

CSS

#wrap
{
    width: 100%;
}
#left, #right {padding:5px;}

#left {
    background-color:red;
    text-align:left;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#right {
    background-color:orange;
    float:right;
    text-align:right;
    white-space: nowrap;
}

Answer 2

拥抱Flexbox的力量！这种方法允许您保持文本的顺序，就像您希望它们出现在标记中一样（与上面的浮动方法相反）。这是一个小提琴：Fiddle

Polyfills适用于不支持flexbox的浏览器。

<body>
    <div id="wrap">
        <div id="left">Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left Left</div>
        <div id="right">Right Right Right Right</div>
    </div>
</body>

CSS

#wrap {
    display:flex;
    justify-content:space-between;
}

#left,
#right {
    padding:5px;
}

#left {
    background:red;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1;
}

#right {
    background:orange;
}

CSS：动态宽度文本的单行左对齐文本中的省略号，其中左对齐文本的宽度= 100％ - 右对齐文本

2 个答案:

标记

CSS