Тег — pre, css, grid
Мой макет сайта сделан с помощью сетки GRID. Поэтому возникла проблема с показом кода. Он выходил за рамки макета — неявный грид. Эту проблему я решил, добавив в стили сайта, три строчки. overflow: autoword-break: break-word
white-space: pre-wrap
Внизу в коде я специально сделал много тире, длинный текст ломает (ломал) макет, а по задумке сайта мне надо будет выводить код. Возможно кому-нибудь пригодится пример моего оформления стилей тега "pre":
/*-------------------------- Тег pre --------------------*/
pre {
display: grid;
height: 200px;
border-radius: 3px;
overflow: auto;
word-break: break-word;
white-space: pre-wrap;
margin: 16px 16px 30px 16px;
padding: 16px 24px;
position: relative;
font-size: 16px;
background: LightSlateGray;
border: 2px solid white;
font-style: italic;
box-shadow: 4px 3px LightSlateGray, -.3em 0 .5em LightSlateGray;
color: white;
}
Ну и пару ссылочек :