-->

Текст в элементе не переходит на новую строку при переполнении

Текст разделён тегами без пробелов, чтобы управлять отступами между inline-элементами

СсылкаСсылкаСсылкаСсылкаСсылка
<style>
nav {
  background: mistyrose;
}
nav a {
  border: 1px solid red;
}
</style>

<nav class="raz"><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a></nav>

display: inline-block;

СсылкаСсылкаСсылкаСсылкаСсылка
<style>
nav {
  background: mistyrose;
}
nav a {
  display: inline-block;
  border: 1px solid red;
}
</style>

<nav class="raz"><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a></nav>

word-spacing: -100%;

Ссылка Ссылка Ссылка Ссылка Ссылка 
<style>
nav {
  word-spacing: -100%;
  background: mistyrose;
}
nav a {
  word-spacing: normal;
  border: 1px solid red;
}
</style>

<nav class="raz">
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
</nav>

Пробел без ширины &#8203;

СсылкаСсылкаСсылкаСсылкаСсылка
<style>
nav {
  background: mistyrose;
}
nav a {
  border: 1px solid red;
}
nav a::after {
  content: '\200b';
}
</style>

<nav class="raz"><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a><a href="#">Ссылка</a></nav>
в f t
наверх ↑

2 комментария:

Комиго
В фаерфокс на андроиде приём с word-spacing не хочет работать( с остальным всё хорошо.
NMitra
Верно, на 09.2017 год word-spacing в процентах только у Firefox поддерживается: https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing#Browser_compatibility

Спасибо за уточнение!

Отправить комментарий