我正在开发一个带有可视化组件的网络应用程序，该组件需要被省略。问题是我需要在同一行上添加一些其他元素。
[ 省略号的文本 |元素-x |元素-y]
我尝试过使用 float 来让所有内容都在一行中，但这会阻止元素被省略。
我想出的唯一解决方案是让 element-y { position: fixed;顶部:0； right:0 }，但我必须在省略号文本上做一个 margin-right: xxx，我可以接受。
问题是，element-x 是一个来自翻译文件的外部化字符串，所以我没有一个干净的方法来获取此处的宽度。
有谁知道实现这一目标的干净方法？理想情况下，我想避免在除 element-y(图像)之外的任何内容上设置任何宽度。
最佳答案
您必须将 float 设置为第二个 div 的右侧，并使用以下 CSS 规则使第一个 div 椭圆化:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
然后在第一个元素中添加如下规则:
display: inline-block;
width: calc(100% - 50px);
(您可以根据需要调整calc规则)。
这是一个有效的 JSFiddle .
关于html - 在同一行上使用 CSS 省略号和其他元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12389921/