包装器内两个跨距之一的文本溢出省略号

Question

我遇到省略号问题。这是我的HTML：

<div id="wrapper">
    <span id="firstText">This text should be effected by ellipsis</span>
    <span id="lastText">this text should not change size</span>
</div>

有没有办法用纯css做到这一点？ 这是我尝试过的：

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    white-space:nowrap;
    overflow:visible;   
}

这是如何显示的：

本文应以省略号的形式实施

虽然这是我想要的结果：

此文本应为e ...此文本不应更改大小

Answer 1

您可以width向#firstText提供#firstText { overflow: hidden; white-space:nowrap; text-overflow:ellipsis; width:150px; display:inline-block; } ：

{{1}}

检查此示例

http://jsfiddle.net/Qhdaz/5/

Answer 2

您可以通过更改跨度的顺序并使第一个跨度向右浮动来实现此目的。这样您就不必为任何元素设置宽度：

＆＃13;

＆＃13;

#firstText
{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lastText
{
    float:right;
    white-space:nowrap;
}

＆＃13;

<div id="wrapper">
    <span id="lastText">this text should not change size</span>
    <span id="firstText">This text should be effected by ellipsis</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

还有一些案件没有得到处理：

如果你有一个未知的或动态的包装器大小，你希望第一个孩子占用所有可用空间，但是如果它仍然太长则需要省略号。

以下是使用flex CSS属性的解决方案：

#wrapper{
    display: inline-flex;
    flex-flow:row nowrap;
    max-width:100%; /* or width:100% if you want the spans to take all available space */
}
#firstText{
    flex:1;
    white-space:pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lastText{
    white-space:nowrap;
}

Answer 4

您可以这样伪造：将您的span更改为div并更改您的CSS：

#firstText
{
    float: left;
    width: 250px;
    height: 20px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    float: left;
    white-space:nowrap;
    overflow:visible;   
}