CSS：水平佈局基於可變尺寸和自定義邏輯

我有以下結構CSS：水平佈局基於可變尺寸和自定義邏輯

<div class="c0"> 
    <span class="c1">"Text1: Some possibly long text"</span> 
    <span class="c2">Some icon is being displayed</span> 
    <span class="c3">"Text 3: Some possibly long text"</span> 
</div>

總寬度是，說100px的和圖標寬度，說20像素。佈局應該是：

如果文本1和文本3的長度小於80px，然後我要顯示整個字符串，因爲它是剩餘左邊一些空間。
如果文本1和文本3的長度大於80px，和文本1小於40像素和文本3超過40像素，我想顯示「文本1」，「圖標」，「文本3與省略號截短字符串」
基本上條件（2），所不同的text1和文字3反轉
如果文本1和文本3的長度大於80px，和文本1大於40像素和文本3超過40像素，我想顯示「Text1 with ellipsis truncating the string」「icon」「Text3 with省略號截斷字符串「

這可以使用CSS來實現嗎？我嘗試過使用Flexbox等，但還沒有找到一種方法來實現上述目標。

來源

2016-11-03 AshD

可以使用CSS

.c1, .c3 { 
    width: 40px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

截斷字符串和HTML的樣子：

<div class="c0"> 
    <div class="c1">"Text1: Some possibly long text"</div> 
    <div class="c2">Some icon is being displayed</div> 
    <div class="c3">"Text 3: Some possibly long text"</div> 
</div>

來源

2016-11-03 06:03:39 Banzay

但是，在文本1的長度爲10px的和文字3的長度爲60像素，這將不解決的情況下。即使有足夠的空間來覆蓋整個文本，我也只能看到40px的文本3 – AshD

CSS：水平佈局基於可變尺寸和自定義邏輯

回答

相關問題