如何在引导程序中自动换行

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!

                        </code>

                     </pre>

                </div>

             </span>

        </a>

    </li>

</ul>

此代码结果是创建溢出-x 滚动。

Answer 1

您可以使用word-break财产。.alas {&nbsp; 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

您可以使用 CSS 属性word-wrap:break-word。div {&nbsp; word-wrap: break-word;}<div>&nbsp; <p>DSCSNKCSKCSCMSKCSKCSKCNSKCNSKCNKSCNSKCNSKCNSKCNSKCNSKCNSKNCKSCNKSNCKSCNSCNKSKCSNCKSKNCSKNCSKCNKSKCNSKNCSKNCKSNCSNKCKCNNSKCNSCNKSCNKSNCK</p></div>

Answer 3

word-break属性可以帮助你解决这个问题p {&nbsp; overflow-wrap: break-word;}<p>VDAAAAAAAAAAJCAJANVAKVJNAKVAKVNAKVNAKVAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAVANVALKVMAJLIILVEAJAJALVNALIVNALKVAKLNVANAKLVNANAVLJANVLAKSVSAKLVASKLVAKLVALKVAKNVAS</p>