I'm setting "overflow scroll able" option. I want setting this overflow option of only y scrolling and if x content overflow so, line break.

I apply 'white-space'. but, can't applicable.

<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!
                        </code>
                     </pre>
                </div>
             </span>
        </a>
    </li>
</ul>

This code result is create overflow-x scroll.

I'm setting "overflow scroll able" option. I want setting this overflow option of only y scrolling and if x content overflow so, line break.

I apply 'white-space'. but, can't applicable.

<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!
                        </code>
                     </pre>
                </div>
             </span>
        </a>
    </li>
</ul>

This code result is create overflow-x scroll.

• javascript
• jquery
• html
• css
• bootstrap-4

Share Improve this question Follow asked Jun 10, 2019 at 6:33 FunniestFunniest 8911 gold badge22 silver badges1010 bronze badges 2

• try with white-space: pre-wrap; on pre tag – Lalji Tadhani Commented Jun 10, 2019 at 6:36
• Try adding white-space: normal; to your prettyprint linenums class – Stefan Joseph Commented Jun 10, 2019 at 6:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can use word-break property.

.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>

word-breakproperty helps you to fix this

p {
  overflow-wrap: break-word;
}

<p>VDAAAAAAAAAAJCAJANVAKVJNAKVAKVNAKVNAKVAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAVANVALKVMAJLIILVEAJAJALVNALIVNALKVAKLNVANAKLVNANAVLJANVLAKSVSAKLVASKLVAKLVALKVAKNVAS</p>

As you have use <pre> to contain your text, you can try white-space: pre-wrap;

If you do not want the tab infront, you can try 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!
        </code>
     </pre>
     
     
       <pre id="pre-line" 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!
        </code>
     </pre>
</div>

You can use CSS property word-wrap:break-word.

div {
  word-wrap: break-word;
}

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