要区分软换行与存储的换行符，请在文本编辑器中关闭自动换行并检查原始文本。本 Mac 指南将解释该检查方法、浏览器布局如何误导您，以及复制的代码实际能证明什么。

软换行与换行符有什么区别？

软换行是指浏览器或编辑器为适应可用宽度而将文本移至另一显示行。存储的换行符是文本本身的一部分。W3C 区分软换行断行与强制断行，后者可能源自保留的换行字符或块边界。CSS 空白处理改变呈现方式而不改变底层文档数据。 CSS Text Module Level 3

这种区别在代码出现多行时产生三种可能性：一个逻辑行发生了换行；文本包含分离的逻辑行；或页面结构强制了视觉断行。仅凭截图无法可靠识别哪种情况适用。

此处，“手工换行”指被检查源代码中存在的换行符。其存在不代表是谁插入的：格式化工具、导出过程或其他转换可能产生了它。实际任务是确定边界属于文本本身，还是仅属于其当前呈现。

如何在 Mac 桌面编辑器中检查代码？

使用 Visual Studio Code 进行此工作流。如果有原始代码文件，请从中开始。如果只有公开页面，请将相关代码复制到单独的编辑器文档中，但将该文档视为复制文本的证据，直到能与原始文件比较。

关闭换行而不重新格式化文本

  1. 在 VS Code 中打开文件或复制的样本。
  2. 编辑器聚焦时，按 Option+Z 运行 Toggle Word Wrap（切换自动换行）。
  3. 观察明显的延续行是否与前一显示行合并并水平延伸。
  4. 如果换行已关闭，再切换一次以对比两种状态。重要的是两种视图的差异。

Microsoft 将 Option+Z 记录为 macOS 上 Toggle Word Wrap 的默认快捷键，命令 ID 为 editor.action.toggleWordWrap。如果您的快捷键不同，请在 Keyboard Shortcuts（键盘快捷方式）编辑器中查找该命令。 Default keyboard shortcuts reference

当 editor.wordWrap 设置为 on 时，VS Code 在编辑器视口宽度处换行。因此关闭换行会移除那些视觉延续。在同一未更改文本中保留的边界，是逻辑行边界，而非该编辑器的软换行。 Basic editing

对比视图时使用此决策表：

观察结果 支持的结论 后续操作
关闭换行时，延续行重新加入前一行 它是编辑器中的软换行 保持文本不变
关闭换行时，两行仍然分离 检查的文本包含行边界 若检查的是副本，请与原始文件比较
页面边界在复制文本中消失 页面与复制的表示形式不同 检查页面的文本和结构
复制的边界保留，但无原始文件可用 复制的文本包含该边界 将其来源标记为未解决

尝试合成示例

将以下单行样本粘贴到单独的文档中。这是示例性 JavaScript 文本；无需运行。

const labels = ["Amber", "Birch", "Cedar", "Dune", "Elm", "Fern", "Grove", "Harbor"];

使编辑器足够窄以触发换行。启用换行时，该语句可占据多个显示行。关闭换行：语句应返回单个逻辑行，即使必须水平滚动才能读到末尾。

现在对比这个故意制作的多行版本：

const labels = [
  "Amber", "Birch", "Cedar", "Dune",
  "Elm", "Fern", "Grove", "Harbor"
];

这四个逻辑行在关闭换行时仍然分离。在窄宽度下，其中任何一行也可能发生软换行。这就是有用的区别：存储的换行符和软换行可以在同一代码样本中共存。

对比期间避免格式化文档。目的是在保持被检查文本不变的情况下改变视图。否则，改变的行边界可能反映编辑而非显示设置。

为什么调整浏览器窗口大小只是初步测试？

想象一个抽象的公开页面，带有导航栏和代码面板。拓宽浏览器可能给面板更多空间。如果边界移动到不同单词，这支持换行解释。然而，如果面板有固定宽度，调整外层窗口可能使其保持不变。

因此，保持不动的边界无定论。浏览器可能保留换行符、遇到结构断行、或在可用宽度未变的面板内换行。请根据文本表示确认结果，而非将窗口调整视为证据。

CSS 也决定存储的换行符是否可见。MDN 记录了这些常见值： white-space CSS property

CSS 值 对源换行符的处理 自动换行
normal 与其他空白合并 允许
pre 保留 禁用
pre-wrap 保留 允许
pre-line 保留；空格和制表符合并 允许

因此，pre-wrap 可同时显示两种边界，而 normal 可隐藏源换行符。用 nowrap 禁用换行不足以作为源保留测试，因为它也会合并空白。对于您控制的简单文本块，pre 是需要保留空白且无自动换行时的相关比较。 white-space CSS property

复制的文本能揭示原始换行符吗？

复制的文本有用，但它是单独的表示。MDN 将 innerText 描述为渲染文本，近似于选择并复制元素所产生的内容。它响应渲染外观，包括显式断行如 br 元素。因此，粘贴样本中的换行符本身并不证明原始代码字符串包含换行符。 HTMLElement: innerText property

对于简单的静态代码容器，textContent 回答不同问题：它返回节点及其后代的文本，拼接后代文本而不使用渲染外观。这使其在检查 DOM 文本时有用，前提是容器实际包含您想要的代码。 Node: textContent property

这些属性不是可互换的恢复工具。结构断行不一定在 textContent 中是换行符；反之，源空白可能存在却不作为渲染断行出现。当页面的文本与布局不一致时，请精确描述结果：“DOM 文本包含换行符”、“布局强制断行”或“复制版本包含换行符”。避免声称超出被检查表示所确立的内容。

浏览器代码编辑器有何变化？

浏览器编辑器可能将其文档与显示元素分开维护。例如，CodeMirror 官方源文档通过其 Text 模型描述文档行：lines 计算逻辑行，line(n) 检索编号行。一行的 to 位置在其后续行断行之前，或在文档末尾。 CodeMirror document text API documentation

CodeMirror 还记录其视图仅将可见代码加上周围边距绘制到 DOM 中。其 lineWrapping 属性描述视图中的换行。这些边界意味着计算渲染行数或提取可见编辑器 DOM 不足以确定完整文档的行。 CodeMirror editor view API documentation

对于普通桌面检查，请在可用时使用宿主应用的文档下载、导出或复制命令，然后在关闭换行下检查该结果。如果您维护 CodeMirror 集成，请使用其文档模型确定逻辑行。库 API 并不意味着每个应用都暴露等效的用户界面控件。

表单会添加从未输入的换行符吗？

会。WHATWG HTML Standard 区分 textarea 的当前 API 值与其提交表示。使用 wrap="soft" 时，文本可视觉换行而无额外提交换行。使用 wrap="hard" 时，提交表示可获得换行；该状态要求指定 cols。API 值将行结束符规范化为 LF。 HTML Standard: The textarea element

这在比较基于表单的工作流前后文本时很重要。仅出现在提交或导出结果中的边界可能来自该处理阶段。检查与您任务相关的表示：识别输入边界时检查当前编辑器文本，确定实际导出内容时检查生成的文件。

如何保留浏览器和文本成形边界？

将视觉换行留给浏览器或编辑器。W3C 规定 overflow-wrap: anywhere 保持字素簇在一起并保留跨引入换行的成形。在固定字符数后插入换行符重建行，无法复制那些布局规则。 CSS Text Module Level 3

对于需要复用的代码样本，首先获取最佳可用源，对比开启与关闭换行，并保留其存储的行边界，除非您意图编辑。如果只有渲染页面可用，请记录您能确立的关于该表示的内容，并将不确定的边界标记为未解决。这为您提供可重复的检查，而不会将显示调整变成意外的文本更改。

来源