尝试制作预标记 fit\wrap

Question

目前，预标签比移动设备上的屏幕更宽，我似乎无法使其换行。这是我的代码示例： https ://jsfiddle.net/v526rkLm/12/

<div class="container">
    <div class="row">
        <div class="col-12 question">
            <span class="qtitle"><h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aut iure ipsum illo qui tempore cumque sapiente! Totam architecto sequi nesciunt maiores eius laudantium dignissimos necessitatibus, aperiam at ullam sed!</h3></span>


<div class="qbody">
    <code><pre>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aut iure ipsum illo qui tempore cumque sapiente! Totam architecto sequi nesciunt maiores eius laudantium dignissimos necessitatibus, aperiam at ullam sed!</pre></code>
</div>
</div>
</div>
</div>

我希望它全部在移动设备上垂直居中，但不知道如何使其工作。

谢谢

Answer 1

标签<pre>有自己的处理空白的选项。

• pre：保留空白序列。仅在源和元素中的换行符处断行<br>。
• pre-wrap：保留空白序列。行在换行符、<br>和 处断行，以填充行框。
• pre-line：空白序列被折叠。行在换行符、<br>和 处断行，以填充行框。

max-content您还在CSS 中设置了宽度值。结合起来，这可以防止文本换行。

将以下 CSS 与媒体查询结合使用来定位移动设备可以解决此问题：

white-space: pre-wrap;
width: 100%;