Текст 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- a-span-with-hidden-overflow) – 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

Это работает правильно, но я хочу, чтобы ширина была полной. Ширина экрана - 40 пикселей; Becuz иногда пользователи могут повернуть свой экран. –

вы можете использовать% в этом случае ... и . –

Снова это не будет нормально. Потому что я хочу только отображать значок справа, поэтому, если бы я установил 25% ширины пользователя с ipad, он увидит очень длинный пустой столбец –

Текст CSS переполнен значок

ответ

Смежные вопросы