1

我正在开发一个带有需要省略的可视组件的 Web 应用程序。问题是我需要在同一行上有一些其他元素。

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

我尝试使用浮点数来将所有内容放在一条线上，但这可以防止元素省略。

我想出的唯一解决方案是制作 element-y { position: fixed; top:0; right:0 }，但是我必须对margin-right: xxx椭圆形的文本做 a ，我可以接受。

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

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

4

2 回答 2

2

您必须float为第二个 div 设置为 right 并使用以下 CSS 规则使第一个 div 椭圆：

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

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

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

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

这是一个有效的JSFiddle。

于 2017-06-26T10:16:25.250 回答
0

我想出了一个似乎适用于不同浏览器的解决方案：

您必须将椭圆形块元素包装在内联元素中。椭圆化的工作方式，你的椭圆化元素需要受到某些东西的约束。通常，这是一个静态宽度。但是，最大宽度或来自父级的任意约束也有效。

<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-22T14:44:57.053 回答