Как убрать горизонтальную полосу прокрутки | CSS

Горизонтальная полоса прокрутки появляется когда содержимое при direction: ltr; выходит за правый (при direction: rtl; — за левый) край страницы, например,

длина окна:
тысячадевятьсотдевяностодевятикилограммовый
длина окна:
<style>
body {
  direction: rtl; /* для тех кто читает справа налево, важно учитывать межязыковым сайтам */
}
</style>

тысячадевятьсотдевяностодевятикилограммовый

Искл., ежели содержимым является элемент, у которого свойство position имеет значение fixed.

длина окна:
<style>
div {
  position: fixed;
}
</style>

<div>тысячадевятьсотдевяностодевятикилограммовый</div>

То есть если элемент при direction: ltr; уводить за левый (при direction: rtl; — за правый) край страницы, то горизонтальной полосы прокрутки не будет.

<style>
body {
  direction: rtl;
}
div {
  -webkit-margin-start: -10em; /* отсутствует в W3C */
  margin-inline-start: -10em;
}
</style>

<div>тысячадевятьсотдевяностодевятикилограммовый</div>

Можно запретить появление горизонтальной полосы прокрутки и обрезать выходящее за страницу содержимое, но это лишь усугубит проблему — чтобы читатель имел возможность прокрутить страницу, нужно будет разрабатывать и подключать JavaScript

длина окна:
<style>
html,
body {
  overflow-x: hidden;
}
</style>

тысячадевятьсотдевяностодевятикилограммовый

Следует доработать вёрстку: при отзывчивой, сделанной специалистом, хорошо разбирающимся в CSS, проблем не должно возникать

длина окна:
<style>
body {
  word-wrap: break-word;
  hyphens: auto;
}
</style>

тысячадевятьсотдевяностодевятикилограммовый
в f t
наверх ↑

Комментариев нет: