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

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…此文本不应更改大小

原文由 funkyfly 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以像这样将 width 给您的 #firstText ：

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

检查这个例子

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

原文由 sandeep 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

#lastText
{
  color:red;
  font-size:30px;
  float:right;
  white-space:nowrap;
}

 <div id="wrapper">
    <span id="lastText">this text must be shown in full</span>
    <span id="firstText">This text may be cropped</span>
</div>

原文由 Michiel 发布，翻译遵循 CC BY-SA 4.0 许可协议