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

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

css

CSS：动态宽度文本单行的左对齐文本中的省略号，其中左对齐文本的宽度=100%-右对齐文本,css,Css,我需要创建一个设计，最终用户将看到一行包含两个组件的文本。text align:leftdiv可以具有任意长度的文本。text align:rightdiv的长度通常约为9或10个字符，但可以想象它可能会高达20个字符以下是它需要如何向最终用户显示：文本对齐：左文本应使用省略号将屏幕上不适合的任何文本隐藏在一行文本中文本右对齐文本应始终在屏幕上的同一行中 text align:leftdiv的宽度应等于浏览器窗口的宽度减去text align:right文本的div的宽度文本对齐：ri

我需要创建一个设计，最终用户将看到一行包含两个组件的文本。

text align:left

div

可以具有任意长度的文本。

text align:right

div

的长度通常约为9或10个字符，但可以想象它可能会高达20个字符

以下是它需要如何向最终用户显示：

```
文本对齐：左
```
文本应使用
```
省略号
```
将屏幕上不适合的任何文本隐藏在一行文本中
```
文本右对齐
```
文本应始终在屏幕上的同一行中
```
text align:left
```
```
div
```
的宽度应等于浏览器窗口的宽度减去
```
text align:right
```
文本的
```
div
```
的宽度
```
文本对齐：right
```
```
div
```
的宽度应等于其中文本的宽度加上其水平
```
填充
```


<> LI>正文需要在直线中间竖直居中。


我几乎在a中实现了这一点，但在这一点上，我需要为文本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>

我可以在这里跳转到JQuery，让它根据文本align:right
div
的宽度来设置div
的宽度，但如果可能的话，我更愿意用CSS来解决这个问题
以前我试图使用display:table
和display:table cell
来实现这一点，但在table cell
中使用省略号时遇到了各种问题。没有正确显示省略号，也没有，也没有。如果可以的话，我很乐意使用表格单元格

那么，有没有一种方法可以使用纯CSS实现这一点呢？
1）从左div中删除float:left
，然后
2） 在左侧div上添加display:block

还有宾果右边的div只需要占用它所需要的空间，而不需要再给它一个固定的宽度
+（只是为了证明它有效）
加成
拥抱Flexbox的力量！这种方法允许您保持文本在标记中显示的顺序（与上面的浮动方法相反）。这是一把小提琴：
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>

你有没有试过单词包装：打破单词；和溢出包装：断字；没错！谢谢我刚退房，听起来不错，但IE和Safari的支持仍然很差，Firefox只在用户打开偏好开关后才支持它。是否已经有了polyfill，可以在那些浏览器上实现这一点？这就是生活在边缘的问题；）这里是上最新支持表的链接。只要使用-webkit-
前缀，Safari支持就相当不错。Firefox上的部分支持指标是由于缺乏对flex box模型某些属性的支持。在上面的使用中，我只使用了baredisplay:flex
属性，因此Firefox将支持它。我会到处寻找最著名的当前polyfill。IE9（当然）将是一个问题孩子，希望polyfill能够解决。下面是一个更新版本，演示了-webkit-前缀的使用，该站点非常棒。不过，要负责任地使用它——如果这有意义的话，我会将表格视为测试的“起点”。无论如何，flex box布局的棘手之处在于，一些开发人员在W3C推荐阶段的婴儿阶段就开始创建/实现polyfills，浏览器也在以不同的方式实现该功能。随着规范的改变，那些旧的语法现在是“错误的”。Chris Coyier对这些差异进行了详细分析，并解释了如何识别它们。回答你的问题，是的，IE8是完全没有希望的。然而，这并不一定意味着你错过了大部分的访客。你必须考虑谁来你的网站。此外，它是一种有效的方法，用于检查flexbox支持，并在不支持的情况下提供jscript修复，或者简单地使用IE条件提供alt样式表。这是一种“经得起未来考验”的方法，因为您已经实现了一种基于当前标准的功能，但为最终不支持的浏览器提供了一种后备方法。
<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>

#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;
}

<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>

#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;
}