Question

我正在开发一个带有可视组件的Web应用程序，需要进行椭圆化处理。问题是我需要在同一条线上有一些其他元素。

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

我已尝试使用浮点数来处理所有内容，但这会阻止元素进行椭圆化。

我提出的唯一解决方案是创建元素y { position: fixed; top:0; right:0 }，但是我必须在椭圆化文本上执行margin-right: xxx，我很好。

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

有没有人知道实现这一目标的干净方法？理想情况下，我想避免在除了element-y之外的任何设置上设置任何宽度，这是一个图像。

Answer 1

您必须将float设置为右侧第二个div并使用以下CSS规则进行第一个div椭圆化：

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

然后将以下规则添加到第一个元素：

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

（您可以根据需要调整calc规则。）

这是一个有效的JSFiddle。

Answer 2

我提出了一个似乎在不同浏览器中运行良好的解决方案：

您必须将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>

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

2 个答案: