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

Question

Я устанавливаю опцию «возможность переполнения». Я хочу установить эту опцию переполнения только для y прокрутки и, если x переполнение содержимого так, разрыв строки.

Я применяю «пробел». но не может применяться.

<ul class="sidebar-menu scrollable" style="height: calc(100% - 130px);">
    <li class="nav-item">
        <a class="sidebar-link">
            <span class="title">
                <div id="desc-viewer" class="desc-viewer" style="">
                     <!-- markdown datas... -->
                     <!-- example data -->
                     <pre class="prettyprint linenums">
                        <code>
                        Test syntax! Test syntax! Test syntax! Test syntax! Test syntax!
                        
                     

Этот код является результатом создания overflow-x scroll.

Answer 1

Вы можете использовать word-break свойство.

.alas {
  word-break: break-all;
}

<p class="alas">Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.Hi,Thisisme.</p>

Answer 2

Поскольку вы используете <pre>, чтобы содержать ваш текст, Вы можете попробовать white-space: pre-wrap;

Если вы не хотите вкладку в передней части, вы можете попробовать white-space: pre-line;

#pre-wrap {
    white-space: pre-wrap;
}

#pre-line {
    white-space: pre-line;
}

<div id="desc-viewer" class="desc-viewer" style="">
     <pre id="pre-wrap"class="prettyprint linenums">
        <code>
        Test syntax! Test syntax! Test syntax! Test syntax! Test syntax! est syntax! Test syntax! Test syntax! Test syntax! Test syntax! est syntax! Test syntax! Test syntax! Test syntax! Test syntax!
        
     

        
        Test syntax! Test syntax! Test syntax! Test syntax! Test syntax! est syntax! Test syntax! Test syntax! Test syntax! Test syntax! est syntax! Test syntax! Test syntax! Test syntax! Test syntax!
        
     

Answer 3

word-break свойство поможет вам исправить это

p {
  overflow-wrap: break-word;
}

<p>VDAAAAAAAAAAJCAJANVAKVJNAKVAKVNAKVNAKVAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAVANVALKVMAJLIILVEAJAJALVNALIVNALKVAKLNVANAKLVNANAVLJANVLAKSVSAKLVASKLVAKLVALKVAKNVAS</p>

Answer 4

Вы можете использовать свойство CSS word-wrap:break-word.

div {
  word-wrap: break-word;
}

<div>
  <p>DSCSNKCSKCSCMSKCSKCSKCNSKCNSKCNKSCNSKCNSKCNSKCNSKCNSKCNSKNCKSCNKSNCKSCNSCNKSKCSNCKSKNCSKNCSKCNKSKCNSKNCSKNCKSNCSNKCKCNNSKCNSCNKSCNKSNCK</p>
</div>