CSS 解决 HTML 大段文本没有换行问题

CSS HTML About 829 words

问题

有一大段说明文字,已经分段落和换行好了,但是页面上去没有换行,而且空格也被去掉了。

解决方法

使用white-spacepre-wrap样式。

white-space: pre-wrap

white-space

pre-line

只允许换行,但是多个空格会只保留一个空格。

pre-wrap

允许换行,且保留多个空格。所见即所得。

<p>
    你好,世界!

    你好,               CSS!




    你好,JS
    哈哈哈
</p>
<div style="width:100%;height:20px;background-color: red"></div>
<p style="white-space: pre-line">
    你好,世界!

    你好,               CSS!




    你好,JS
        哈哈哈
</p>
<div style="width:100%;height:20px;background-color: red"></div>
<p style="white-space: pre-wrap">
    你好,世界!

    你好,               CSS!




    你好,JS
        哈哈哈
</p>
<div style="width:100%;height:20px;background-color: red"></div>
<p style="white-space: nowrap">
    你好,世界!

    你好,               CSS!




    你好,JS
        哈哈哈
</p>
Views: 492 · Posted: 2024-02-03

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh