5

我需要创建一个设计，最终用户将在其中看到包含两个组件的单行文本。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。
  • 文本需要垂直居中在行的中间。

我几乎把它搞定了，但我需要为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 并让它根据s的宽度设置width两个 s 的s ，但如果可能的话，我真的更喜欢用 CSS 来解决这个问题。divtext-align:right div

以前我尝试使用display:tableanddisplay:table-cell来实现这一点，但我遇到了使用ellipsiswith的各种问题table-cell。使用table-layout:fixed没有正确显示ellipsis，也没有display:block，也没有设置 amax-width。如果可以的话，我很乐意使用table-cell。

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

4

2 回答 2

7

1）float:left从你的左边 div 和

2）添加display:block到你的左边 div

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

更新的 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;
}
于 2013-09-02T06:54:29.627 回答
0

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

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;
}
于 2013-09-02T07:19:25.497 回答