带有省略号和结尾的 div 的溢出文本行

Question

我有一长串动态文本，后跟一个按钮图像。当宽度使得内容溢出时，我希望用省略号修剪文本，但保持按钮可见。

所以从这里开始：

这是我的长文本等等等等 [按钮]

到这里：

这是我的长... [按钮]

我无法让按钮停留在文本的末尾。如果带有文本的 div 设置为 display:inline-block 则省略号不再出现。文本发生了变化，所以我不能使用固定宽度。

这是基本结构：

<div>
    <div id="text">A long line of text that overflows when window is narrow</div>
    <div id="button"></div>    
</div>

一些css：

#text {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:block;
    padding-top:20px;
    padding-right:50px;

}
#button{
    background-color:lightblue;
    height:20px;
    width:30px;
    display:inline-block;
}

带有相应的fiddle 用于调整目的。

Answer 1

我终于让它工作了 - 使用弹性盒子......这是fiddle

<div id="container">
        <div id="text">A long line of text that overflows when window is narrow</div>
        <div id="button"></div>    
</div>

#container{
    display:flex;
}
#text {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
#button{
    background-color:lightblue;
    height:20px;
    min-width:30px;
    width:30px;
}

Answer 2

这是一种可能适合您的解决方案。

Demo Fiddle

您使用包含的 div 来使其他 div 成为 display: inline-block，然后给文本 div 一个 % 宽度，这样就会发生溢出。您可以使 % 更大或更小，但我发现 80% 效果很好。由于按钮的宽度是固定的，因此当您将窗口调整为非常窄时，它仍然会换行。

HTML：

<div class="container">
    <div id="text"><span>A long line of text that overflows when window is narrow</span></div>
    <div id="button"></div>    
</div>

CSS：

.container{    
    padding-top:20px;
    padding-right:50px; 
}

.container > div {display: inline-block;}

#text {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 80%;
}

#button{
    background-color:lightblue;
    height:20px;
    width:30px;
}