截取不帶寬度的省略號

我試圖實現自適應列表寬度文本溢出：省略號;在第一個單元格中，如下所示：截取不帶寬度的省略號

一行文字太長，必須是... |按鈕2 |

整個列表應該有寬度：100％;與設備一樣大。由於應用程序是多語言的，因此我無法在按鈕2上設置固定寬度（儘管可以使用最大寬度）。

我可以嘗試任何我想要的，只有當我設置固定寬度時纔會出現。如何在沒有JavaScript的幫助下告訴中間單元「使用可用空間」？

獲取輸出：

約翰DOE1（2）約翰Doesdfsf ...（3） Jo1（4）

預期輸出：

約翰DOE1（2） John Doesdfsf ...（3） Jo1（4）

CSS：

.truncate-ellipsis { 
     display: inline-block; 
     white-space: nowrap; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     -o-text-overflow: ellipsis; 
     width: 20%; 
}

HTML：

<div ng-app="myApp" ng-controller="validateCtrl"> 
<ul> 
<li><label class="truncate-ellipsis">{{title1}}</label>({{count1}})</li> 
<li><label class="truncate-ellipsis">{{title2}}</label>({{count2}})</li> 
<li><label class="truncate-ellipsis">{{title3}}</label>({{count3}})</li> 
</ul> 
</div>

DEMO

來源

2016-04-25 CodeMan

它正在與最大寬度也：

.truncate-ellipsis { 
    display: inline-block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    max-width: 20%; 
}

實施例：https://jsfiddle.net/U3pVM/24348/

來源

2016-04-25 10:13:37

截取不帶寬度的省略號

回答

相關問題