text-overflow:ellipsis;
работает только тогда, когда выполняются следующие условия:
- Ширина элемента должна быть ограничена в
px
(пикселях). Ширина в %
(процентах) не будет работать.
- Элемент должен иметь
overflow:hidden
и white-space:nowrap
установить.
Причина, по которой у вас возникают проблемы, заключается в том, что width
ваш a
элемент не ограничен. У вас есть width
настройка, но поскольку элемент установлен display:inline
(то есть по умолчанию), он игнорирует его, и ничто иное не ограничивает его ширину.
Вы можете исправить это, выполнив одно из следующих действий:
- Установите элемент в
display:inline-block
или display:block
(возможно, первый, но зависит от ваших требований макета).
- Установите один из его контейнерных элементов в
display:block
и присвойте этому элементу фиксированный width
или max-width
.
- Установите для элемента значение
float:left
or float:right
(возможно, первое, но, опять же, любой из них должен иметь тот же эффект, что и многоточие).
Я бы предложил display:inline-block
, так как это будет иметь минимальное побочное влияние на ваш макет; он работает очень похоже на display:inline
то, что он использует в настоящее время, что касается макета, но не стесняйтесь экспериментировать и с другими пунктами; Я попытался дать как можно больше информации, чтобы помочь вам понять, как эти вещи взаимодействуют друг с другом; Большая часть понимания CSS связана с пониманием того, как различные стили работают вместе.
Вот фрагмент с вашим кодом, с display:inline-block
добавлением, чтобы показать, насколько вы были близки.
.app a {
height: 18px;
width: 140px;
padding: 0;
overflow: hidden;
position: relative;
display: inline-block;
margin: 0 5px 0 5px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}
<div class="app">
<a href="">Test Test Test Test Test Test</a>
</div>
Полезные ссылки: