Автоматическая подстройка ширины по длине текста

Question

section{
    display: grid;
    
    

    grid-template-areas: 
    ".  co .";
}

.container{
    display: grid;
    grid-area: co;
    background: red;
}

<section>

<div class="container">
13333333333333333333333333333333333333333333333333333333333434654367463278642387423784083209843029743290884329084239084239804239842398402389402398402398402389423980402398403298432843824832908430298

</div>

</section>

Пытаюсь сделать контейнер при помощи grid-template-areas. Разместил его по центру ". co ." но если вставить очень много текста в блок <div class="container"> то верстка ломается, появляется прокрутка и текст уходит за границу экрана. Как при помощи grid сделать максимальную ширину блока, что бы текст переносился при достижении предела?

Answer 1

section {
  display: grid;
  grid-template-areas: ".  co .";
}

.container {
  display: grid;
  grid-area: co;
  background: red;
  word-break: break-all;
}

<section>
  <div class="container">
    13333333333333333333333333333333333333333333333333333333333434654367463278642387423784083209843029743290884329084239084239804239842398402389402398402398402389423980402398403298432843824832908430298
  </div>
</section>

БЛОГ НА HUSL

Автоматическая подстройка ширины по длине текста

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