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

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

这是如何显示:

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

虽然这是我想要的结果:

这个文本应该是......这个文本不应该改变大小

Answer 1

你可以这样给width你#firstText:

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

检查此示例

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

Answer 2

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

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

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

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

Answer 3

还有一些案件没有处理:

如果您有一个未知的或动态的包装器大小,并且您希望第一个子节点占用所有可用空间,但是如果它仍然太长则需要省略号.

这是我使用flexCSS属性的解决方案:

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