logo标签列表

CSS: 左对齐单行动态宽度文本中的省略号，其中左对齐文本的宽度为100％减去右对齐文本

css
5
我需要创建一个设计，其中最终用户将看到一行文本，其中包含两个组件。 text-align:left div 可以有任意长度的文本。 text-align:right div 通常会有大约9或10个字符的长度，但它可能会高达20多个字符。
以下是最终用户需要看到的方式：
- text-align:left 文本应使用省略号来隐藏在单行文本中不适合屏幕的任何文本。 - 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，并根据text-align:right的div的宽度设置两个div的width，但如果可能的话，我真的更喜欢用CSS解决这个问题。

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

那么有没有一种纯CSS的方法来解决这个问题呢？
你尝试过使用CSS属性word-wrap: break-word;和overflow-wrap: break-word;吗？ - Vivek Vikranth
2个回答
7

1) 移除左侧div的float:left

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;
}
太好了！谢谢！ - Vincent
0

拥抱Flexbox的力量！这种方法允许您保持文本的顺序，就像您在标记中打算出现的那样（与上面的浮动方法相反）。这是一个示例：Fiddle

对于不支持flexbox的浏览器，可以使用Polyfills。

<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;
}
我刚刚查看了flexbox文档，它听起来很不错，但是IE和Safari的支持仍然很差，而Firefox只在用户翻转首选项开关后才支持它。是否已经有一个polyfill可以使这些浏览器也能正常工作？ - Vincent
1
这就是生活在技术边缘的问题;) 这里有最新的支持表链接 caniuse.com。只要使用-webkit-前缀，Safari的支持相当不错。Firefox上部分支持指标是由于对flex box模型某些属性缺乏支持。在上述用法中，我仅使用了裸的display:flex属性，所以Firefox会支持它。我会深入挖掘目前最好的已知的polyfill解决方案。IE9将（当然）是需要polyfill解决的兼容性问题。 - Jbird
1
这里有一个更新的 Fiddle，演示了 -webkit- 前缀的使用。 - Jbird
哇，我以前怎么没见过 caniuse.com 呢？这是一个很好的资源。由于IE9存在问题，我猜IE8也将无望了？根据NetMarketShare，它仍然占据了四分之一的浏览器使用率。 - Vincent
1
是的，那个网站很棒。不过要负责任地使用它——我把表格视为测试的“起点”，如果这有意义的话。无论如何，flex box布局的棘手之处在于，在其W3C推荐阶段的初期，一些开发人员开始创建/实现polyfills，而浏览器也以不同的方式实现了该功能。随着规范的变化，那些旧的语法现在已经是“错误”的了。Chris Coyier在这里很好地解释了它们之间的区别，并解释了如何识别它们。 - Jbird
1
回答你的问题，是的 - IE8相当无望。然而，这并不一定意味着你会错过大部分访问者。你必须考虑谁来到了你的网站。此外，使用Modernizr检查flexbox支持并在没有支持时提供jscript修复或仅使用IE条件提供alt样式表是一种有效的方法。这是一种“未来可靠”的方法，因为你已经根据当前标准实现了一个功能，但为最终不支持的浏览器提供了备用方案。 - Jbird
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接