與同一行上的其他元素一起使用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省略號

回答

相關問題