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

【问题标题】：CSS: ellipsis in left-aligned text of single line of dynamic width text where width of left-aligned text = 100% - right-aligned textCSS：单行动态宽度文本的左对齐文本中的省略号，其中左对齐文本的宽度 = 100% - 右对齐文本
【发布时间】：2013-09-08 09:43:31
【问题描述】：

我需要创建一个设计，让最终用户可以看到包含两个组件的单行文本。 text-align:left div 可以有任意长度的文本。 text-align:right div 通常大约有 9 或 10 个字符长，但可以想象它可能高达 20 多个字符。

以下是它需要向最终用户显示的方式：

text-align:left 文本应使用 ellipsis 将任何不适合屏幕的文本隐藏在一行文本中。
text-align-right 文本应始终在屏幕上的同一行中。
text-align:leftdiv 的宽度应等于浏览器窗口的宽度减去text-align:right 文本的div 的宽度。
text-align:rightdiv 的宽度应等于其中文本的宽度加上其水平的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 并让它根据 text-align:right div 的宽度设置 divs 的 widths，但如果可能。

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

那么有没有办法使用纯 CSS 来做到这一点？

【问题讨论】：

您是否尝试过自动换行：break-word；和溢出换行：断字；

标签： css

【解决方案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;
}

【讨论】：

确实是宾果游戏！谢谢！

【解决方案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;
}

【讨论】：

我刚刚查看了the flexbox documentation，听起来不错，但对 IE 和 Safari 的支持仍然很差，而且 Firefox 仅在用户翻转偏好开关后才支持。是否已经有一个 polyfill 可以使其在这些浏览器上也能正常工作？
这就是生活在边缘的问题 ;) 这是caniuse.com 上最新支持表的链接。只要您使用-webkit- 前缀，Safari 支持就非常好。 Firefox 上的部分支持指标是由于缺乏对弹性盒模型的某些属性的支持。在上面的使用中，我只使用了 display:flex 属性，所以 Firefox 会支持它。我将四处寻找最知名的当前 polyfill。 IE9 将（当然）成为 polyfill 可以解决的问题。
这是一个更新的Fiddle，它演示了-webkit-前缀的使用
是的，这个网站很棒。不过，负责任地使用它 - 如果有意义的话，我会将这些表格视为测试的“起点”。无论如何，关于弹性盒布局的棘手部分是一些开发人员在其 W3C 推荐阶段的婴儿阶段开始创建/实现 polyfill，并且浏览器也以不同的方式实现了该功能。随着规范的改变，那些旧语法现在......'错误'。 Chris Coyier 对here 的差异进行了详细分析，并解释了如何识别它们。
回答你的问题，是的 - IE8 相当没有希望。但是，这并不一定意味着您错过了大部分访问者。您必须考虑谁将访问您的网站。此外，使用Modernizr 来检查 flexbox 支持并在不支持时提供 jscript 修复是一种有效的方法 - 或者只是使用 IE 条件来提供 alt 样式表。这是一种“面向未来”的方法，因为您已经实现了一项基于当前标准的功能，但为您最终将不支持的浏览器提供了回退。