与同一行上的其他元素一起使用CSS省略号

我正在使用需要椭圆化的可视化组件的Web应用程序。问题在于我需要在同一行上添加其他元素。与同一行上的其他元素一起使用CSS省略号

[ ellipsized text | element-x | element-y ]

我试着做浮筒的事情在一行上得到的一切，但是这可以防止元素从ellipsizing。

我想出的唯一解决方案是制作元素y { position: fixed; top:0; right:0 }，但是接下来我必须在椭圆化文本上做一个margin-right: xxx，我很满意。

问题是，element-x是一个来自翻译文件的外部化字符串，所以我没有一个干净的方式来获取宽度。

有谁知道一个干净的方式来实现这一目标？理想情况下，我希望避免在元素y之外设置任何宽度，这是一个图像。

来源

2012-09-12 Kir

我拿出这似乎在不同浏览器很好地工作的解决方案：

你必须换你ellipsized块元素在一个内联元素。椭圆化的工作方式，您的椭圆化元素需要受到某些东西的限制。通常，这是一个静态宽度。但是，最大宽度或来自父项的任意约束也适用。

<div class="container"> 
    <span style="display:inline; float: right;"> 
     Right-aligned elements 
    </span> 
    <span> 
     <span class="ellipsized-block-text">Long text goes here</span> 
    </span> 
</div>

来源

2012-10-22 14:44:57 Kir

它不起作用。省略号不适用于'span'元素。 – smartmouse

你必须设置float向右的第二个div并使用以下CSS规则，使第一个div ellipsized：

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;

以下规则，那么添加的第一个元素：

display: inline-block; 
width: calc(100% - 50px);

（您可以根据自己的喜好调整calc规则）。

这是一个工作JSFiddle。

来源

2017-06-26 10:16:25 smartmouse

与同一行上的其他元素一起使用CSS省略号

回答

相关问题