html - 包装器内两个跨度之一上的文本溢出省略号

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

你可以像这样给你的#firstText width :

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

检查这个例子

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