CSS文字四溢圖標

嘿，我的右側有一個可點擊的圖標，我的文字是溢出了。我如何解決它？CSS文字四溢圖標

Codepen.io例如：http://codepen.io/anon/pen/XmPmba

圖像：

代碼：

<ons-list-item modifier="tappable" ng-repeat="x in results" style="white-space: nowrap;"> 
 
    <ons-row> 
 
    <ons-col> 
 
     {{ x.title }} 
 
    </ons-col> 
 
    <ons-col width="40px"> 
 
     <ons-icon icon="fa-ellipsis-h" size="22px" style="background-color:red"></ons-icon> 
 
    </ons-col> 
 
    </ons-row> 
 
</ons-list-item>

來源

2015-11-04 Benas Paulikas

你可以用輸出HTML和CSS做一個工作演示嗎？ –

的可能重複[我怎樣才能顯示隱藏溢出跨度點（「...」）？]（http://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-一個跨度與隱藏溢出） – Thaillie

@Thaillie http://codepen.io/anon/pen/XmPmba –

您應該設置一個寬度width屬性，然後設置overflow:hidden。像這樣

<ons-list-item modifier="tappable" ng-repeat="x in results" style="white-space: nowrap;"> 
    <ons-row> 
    <ons-col style="width:80px;overflow:hidden;"> 
     {{ x.title }} 
    </ons-col> 
    <ons-col width="40px"> 
     <ons-icon icon="fa-ellipsis-h" size="22px" style="background-color:red"></ons-icon> 
    </ons-col> 
    </ons-row> 
</ons-list-item>

根據您的需要更改寬度的值。

來源

2015-11-04 12:55:25

這工作是正確的，但我想的寬度是最大寬度。 Screenwidth - 40px; Becuz有時候用戶可能要旋轉他們的屏幕... –

你可以在這種情況下使用％... 和

再次，這將不會好起來。因爲我只想在這樣如果我設定的25％與iPad的寬度，用戶將看到很長的空列 –

CSS文字四溢圖標

回答

相關問題