Почему не работает text-overflow?

Question

[Владимир Новицкий]

Здравствуйте.

Почему-то не работает text-overflow. Вернее, текст обрезается, но не так — не добавляется многоточие в конце.

Пример:

<nav>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="clip"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></li>
    <li class="last-child">
      <a class="first-child-a" href="#">Link 4</a>
      <a href="#">Link 5</a>
    </li>
  </ul>
</nav>

body {
  margin:0;
}
nav {
	background-color:whitesmoke;
}
ul {
	display:-webkit-flex;
	display:   -moz-flex;
	display:    -ms-flex;
	display:        flex;

	margin:0;
	padding:0;
	width:100%;

	list-style:none;

	-webkit-justify-content:flex-start;
	   -moz-justify-content:flex-start;
	    -ms-justify-content:flex-start;
	        justify-content:flex-start;
}
ul li {
	display:-webkit-flex;
	display:   -moz-flex;
	display:    -ms-flex;
	display:        flex;

	margin:0 1rem 0 0;
}
ul li a {
	padding:.3rem .5rem;

	background-color:lightgrey;
}
ul li:last-child {
	margin:0;
}
.clip {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
ul li:nth-last-child(2) {
  -webkit-flex-grow:1;
	   -moz-flex-grow:1;
	    -ms-flex-grow:1;
	        flex-grow:1;
}
.first-child-a {
  margin-right:1rem;
}

Живой пример.

Answer 1

[GreatRash]

1) Если вы кроссбраузерно хотите флексы объявить, то неправильно это делаете:

ul {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

2) Для li тоже самое повторять не надо.
3) Для того, чтоб text-overflow сработал должна быть ширина задана явно (хотя бы максимальная).

Не знаю этого ли вы хотели добиться.

Comments

[Владимир Новицкий]

Почему именно так надо писать? И почему -ms- идет первым? Это принципиально? И про какую именно кроссбраузерность вы говорите (от каких версий браузеров)?

Добиться я хотел немного не этого. Выше писал, если ширина окно позволяет показать весь текст, то обрезать его не надо. 100% тоже не подойдет. Другие варианты есть?

[Владимир Новицкий]

А минимальной шириной нельзя обойтись?

[Владимир Новицкий]

Все доступное место должен занимать li, а а должен быть по размеру текста или обрезаться. Поэтому я и пытался применить text-overflow именно к li.

[GreatRash]

Владимир Новицкий: Потому что синтаксис флексов менялся со временем. W3C переписывали рекомендацию несколько раз, а браузеры реализовывали фичи, не дожидаясь финальной рекомендации.

Кроссбраузерно, значит кроссбраузерно. Этот код будет работать везде где хоть как-то поддерживаются флексы. Подробнее тут.

Не видя макет непонятно чего вы хотите, например нафига у вас там nth-last-child и почему в последнем блоке две ссылки вместо одной.

[Владимир Новицкий]

GreatRash: nth-last-child затем, что эти свойства должны применяться к предпоследнему элементу.
Короче, в зависимости от ситуации, может быть так: codepen.io/Novitsky/pen/gaVvxK или так: codepen.io/Novitsky/pen/aveYOL , или так: codepen.io/Novitsky/pen/WQVzQb , или даже так: codepen.io/Novitsky/pen/NGQYGW

[Владимир Новицкий]

Чтобы было еще понятнее, вот: codepen.io/Novitsky/pen/gaVvxK .
Черновиков или комментариев может не быть. Одна из последних ссылок может тоже не показываться (например, если мы находимся на странице настройки учетной записи, то ссылки на нее нет и наоборот).

[Владимир Новицкий]

Все это добавляется автоматически, с помощью PHP.

[Владимир Новицкий]

И, соответственно, Добавить новую, Черновики и комментарии должны быть всегда в левой части экрана, а Учетная запись и настройки прилеплены к правой стороне. Отсюда последний пункт из двух ссылок и nth-last-child.

[GreatRash]

Владимир Новицкий: codepen.io/GreatRash/pen/dYxmRQ - ???

[Владимир Новицкий]

GreatRash: Да, почти так. Почти идеально. ) Но .clip a не должна быть 100%, а должна быть по размеру текста. Потому что, если текста мало, то ссылка все равно растягивается на всю доступную ширину: codepen.io/Novitsky/pen/XmvEzV (растягиваться должен только ее родительский li).
Но, если по другому невозможно сделать, то придется оставить так. (

[GreatRash]

Владимир Новицкий: Заменяем для .clip a display на inline-block и width на max-width и вуаля.

[Владимир Новицкий]

GreatRash: Фух, ну наконец-то. Теперь получилось. Спасибо большое!

А по flexbox'у, я знаю, что есть старый и есть новый, но почему -ms- первым идет? Это принципиально или просто Вы так написали?

[GreatRash]

Владимир Новицкий: Да пофиг кто из них первым идёт, главное чтоб W3C-шный вариант был последним.

[Владимир Новицкий]

GreatRash: Понял, спасибо.