КодSEOБлогИное

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

Курсы HTML, CSS, PHP, JavaScript, лектор Трепачёв Д.П.

Текст разделён тегами без пробелов, чтобы управлять отступами между 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>
CoMiGo GamesВ фаерфокс на андроиде приём с word-spacing не хочет работать( с остальным всё хорошо. NMitraВерно, на 09.2017 год word-spacing в процентах только у Firefox поддерживается, да и то в основном только на ПК: https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing#Browser_compatibility Спасибо за уточнение!
Все комментарии