Question

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

所以从这个：

这是我的长文blah blah [button]

对此：

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

我不能让按钮坚持到文本的末尾。如果带有文本的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来创建其他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;
}

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

2 个答案: