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>

Answer 4

当您使用<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!
        </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>

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

4 个答案: