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

我的省略号有问题。 这是我的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 asked 2019-11-08T10:43:22Z
4个解决方案
101 votes

您可以像这样将width捐给#firstText

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

检查这个例子

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

sandeep answered 2019-11-08T10:43:54Z
11 votes

您可以通过更改跨度的顺序并为第一个跨度赋予浮点数来实现此目的。 这样,您不必为任何元素设置宽度:

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

Michiel answered 2019-11-08T10:44:33Z
8 votes

仍然有一个小案件没有处理:

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

这是我使用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;
}
Freezystem answered 2019-11-08T10:45:13Z
1 votes

您可以这样伪造:将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;   
}
Jarno Argillander answered 2019-11-08T10:45:39Z
translate from https://stackoverflow.com:/questions/8122042/text-overflow-ellipsis-on-one-of-two-spans-inside-a-wrapper