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

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 {

  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 {

  word-wrap: break-word;

}

<div>

  <p>DSCSNKCSKCSCMSKCSKCSKCNSKCNSKCNKSCNSKCNSKCNSKCNSKCNSKCNSKNCKSCNKSNCKSCNSCNKSKCSNCKSKNCSKNCSKCNKSKCNSKNCSKNCKSNCSNKCKCNNSKCNSCNKSCNKSNCK</p>

</div>

Answer 3

word-break属性可以帮助你解决这个问题

p {

  overflow-wrap: break-word;

}

<p>VDAAAAAAAAAAJCAJANVAKVJNAKVAKVNAKVNAKVAAAAAAAAAVAAAAAAAAAAAAAAAAAAAAVANVALKVMAJLIILVEAJAJALVNALIVNALKVAKLNVANAKLVNANAVLJANVLAKSVSAKLVASKLVAKLVALKVAKNVAS</p>