如何用HTML/CSS实现源码换行但浏览器显示连续自动折行？

你当前使用的white-space: pre-line属性会保留源码中的手动换行符，因此会出现源码每一行对应渲染单独一行的问题，该需求完全可以通过原生CSS实现。

将容器的white-space属性设置为normal即可，这也是HTML元素的默认样式，你可以直接删除现有white-space: pre-line配置，也可以显式声明该值。

white-space: normal的特性完全匹配你的需求：

• 自动合并源码中的所有空白字符：手动换行、多个连续空格、制表符都会被合并为单个普通空格
• 文本仅在容器宽度不足时自动折行，源码里的手动换行不会触发渲染阶段的强制换行

.MYDIV {
    overflow-x: auto;
    white-space: normal;
    border: 1px solid #cccccc;
    height: auto;
    width: 320px;
}

可选扩展（消除换行带来的多余空格） #

如果你连源码换行产生的单个空格也不想保留，可以在源码换行的位置插入HTML注释抵消空格，示例如下：

<div class="MYDIV">
 Look I really just want to be able to write this like this in html.<!--
 -->And have this be on the same line in the browser and wrap. I know<!--
 -->it's weird but it would make my life easier.
</div>

内容的提问来源于stack exchange，提问作者boardkeystown