Как сделать перенос текста в элементе с горизонтальным скроллом

Question

Я пытаюсь перенести длинный текст на новую строку (включая все заголовки, основные и дополнительные) если этот текст больше ширины изображения. Как я могу это сделать?

Мне требуется сделать так чтобы элемент всё ещё имел scroll по горизонтали

Codepen если требуется: https://codepen.io/myacat339/pen/OJEjWEZ.

#rolecard {
    margin-left: 10px;
    margin-bottom: 10px;
}
#containerimgrole {
    width: 150px;
    border-radius: 10px;
    background-color: #000000;
}
#cardmaintext {
    color: #ffffff;
    font-size: 1rem;
    margin-top: 5px;
    display: inline-block;
    font-family: "Roboto",serif;
    font-weight: 600;
    text-decoration: none;
    hyphens: auto;
}
#cardadditionaltext {
    color: #4d4d4d;
    font-size: 0.65rem;
    margin-top: 5px;
    display: inline-block;
    font-family: Roboto,serif;
    text-decoration: none;
    font-weight: 450;
}
#roles {
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    background-color: #1e1e1e;
    white-space: nowrap;
}
#characterstitle {
    font-family: "Segoe UI",serif;
    font-size: 20px;
    font-weight: 600;
    margin-top: 5px;
    margin-left: 10px;
    margin-bottom: 5px;
    display: inline-block;
    text-decoration: none;
    color: #eaeaea;
}
.card {
    display: inline-block;
    text-align: center;
}
.scrolling-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}
.scrolling-wrapper:hover {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

<div id="roles" style="padding-right: 0.5rem; display: inline-block; margin-top: 5px; border-radius: 15px; margin-left: -3px; width: 60rem;">
      <a id="characterstitle" style="margin-bottom: 10px;">Title</a>
      <div style="display:block;" class="scrolling-wrapper">
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Normal text</a>
            <br>
            <a id="cardadditionaltext">Normal text</a>
            <br>
          </div>
        </div>
        <div  class="card" id="rolecard">
          <div id="cardrole" >
            <img id="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
            <br>
            <a id="cardmaintext">Very long text for example to text wrap</a>
            <br>
            <a id="cardadditionaltext">Very long text for example to text wrap</a>
            <br>
          </div>
        </div>
        
      </div>
</div>

Answer 1

Для переноса текста используется свойство white-space: normal, для скролла overflow: auto (В обоих случаях нужно ограничение блока по ширине). Браузер не может создать одновременно и горизонтальную прокрутку, и перенос слов, это взаимоисключающие решения. Их невозможно применить одновременно, поэтому нужно выбирать.

Пример (в верхней строке перенос, в нижней прокрутка):

#rolecard {
  margin-left: 10px;
  margin-bottom: 10px;
}
.cardrole {
  max-width: 150px;
}
.containerimgrole {
  width: 150px;
  border-radius: 10px;
  background-color: #000000;
}
.cardmaintext {
  color: #ffffff;
  font-size: 1rem;
  margin-top: 5px;
  display: inline-block;
  font-family: "Roboto",serif;
  font-weight: 600;
  text-decoration: none;
  hyphens: auto;
  max-width: inherit;
  white-space: normal;
}
.cardadditionaltext {
  color: #4d4d4d;
  font-size: 0.65rem;
  margin-top: 5px;
  display: inline-block;
  font-family: Roboto,serif;
  text-decoration: none;
  font-weight: 450;
  max-width: inherit;
  overflow: auto;
}
#roles {
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  text-decoration: none;
  background-color: #1e1e1e;
  white-space: nowrap;
}
#characterstitle {
  font-family: "Segoe UI",serif;
  font-size: 20px;
  font-weight: 600;
  margin-top: 5px;
  margin-left: 10px;
  margin-bottom: 5px;
  display: inline-block;
  text-decoration: none;
  color: #eaeaea;
}
.card {
  display: inline-block;
  text-align: center;
}
.scrolling-wrapper {
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}
.scrolling-wrapper:hover {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

<div id="roles" style="padding-right: 0.5rem; display: inline-block; margin-top: 5px; border-radius: 15px; margin-left: -3px; width: 60rem;">
  <a id="characterstitle" style="margin-bottom: 10px;">Title</a>
  <div style="display:block;" class="scrolling-wrapper">
<div  class="card" id="rolecard">
  <div class="cardrole" >
    <img class="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
    <br>
    <a class="cardmaintext">Normal text</a>
    <br>
    <a class="cardadditionaltext">Normal text</a>
    <br>
  </div>
</div>
<div  class="card" id="rolecard">
  <div class="cardrole" >
    <img class="containerimgrole" loading="lazy" src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/large/nx21-tXMN3Y20PIL9.jpg" />
    <br>
    <a class="cardmaintext">Very long text for example to text wrap</a>
    <br>
    <a class="cardadditionaltext">Very long text for example to text wrap</a>
    <br>
  </div>
</div>
  </div>
</div>

Кстати, совет на будущее: большинство элементов (особенно повторяющихся) лучше именовать не в id, а в class. id принято использовать только в крайнем случае.

БЛОГ НА HUSL

Как сделать перенос текста в элементе с горизонтальным скроллом

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