Сделать scroll на ширину блока

Question

Подскажите пожалуйста, есть блок <div id="left"> в нем лежит два блока <div id="list"> и <div="restext"> для #restext задано float: left.

Подразумевается что в блок restext приходит текстовый документ в котором каждое предложение начинается с новой строки, то есть разделение происходит split('\n').

Если предложение длинное, то то, что не влезает в ширину, переходит на новую строчку (остаток).

Вопрос: Есть ли в CSS такие средства чтобы при тексте с длинными предложениями перехода на новую строчку не происходило, а появлялся горизонтальный scroll для блока?

Или это надо делать только с помощью javascript?

Вот код:

#main {
  min-height: calc(100vh - 7.5em);
  width: calc(100% - 30px);
  margin: 0 15px;
  border: 15px solid #525252;
}

#left {
  height: calc(100vh - 7.5em - 30px);
  width: 42%;
  border-right-width: 15px;
  border-right-color: #525252;
  border-right-style: solid;
  float: left;
  overflow: auto;
}

#list {
  float: left;
}

#restext {
  padding-top: 10px;
}

#right {
  height: calc(100vh - 7.5em - 30px);
  overflow: auto;
}

<div id="main">
  <div id="left">
    <div id="list"></div>
    <div id="restext"></div>
  </div>
  <div id="right"></div>
</div>

Answer 1

Для того что бы получить нужный Вам эффект можно воспользоваться свойством white-space со значением nowrap, предворительно убедившись что overflow позволит скроллить контент в горизонтальном направлении:

#main {
  min-height: calc(100vh - 7.5em);
  width: calc(100% - 30px);
  margin: 0 15px;
  border: 15px solid #525252;
}

#left {
  height: calc(100vh - 7.5em - 30px);
  width: 42%;
  border-right-width: 15px;
  border-right-color: #525252;
  border-right-style: solid;
  float: left;
  overflow: auto;
}

#list {
  float: left;
}

#restext {
  white-space: nowrap;
  overflow-x: scroll;
  padding-top: 10px;
}

#right {
  height: calc(100vh - 7.5em - 30px);
  overflow: auto;
}

<div id="main">
  <div id="left">
    <div id="list"></div>
    <div id="restext">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</div>
  </div>
  <div id="right"></div>
</div>

БЛОГ НА HUSL

Сделать scroll на ширину блока

Ответы (1 шт):