開發者工具 · HTML WYSIWYG 編輯器

Enter 與 Shift+Enter：編輯者如何在 <p>、<div> 與 <br> 之間進行選擇

2026年2月2日 · 工作原理

html 內容可編輯文字編輯

解釋瀏覽器編輯器背後的段落模型：為什麼 Enter 可以建立 <p> 或 <div>，為什麼 Shift+Enter 插入 <br>，以及它如何決定間距。

為什麼間距在 CMS 中是錯誤的，但在編輯器中卻很好 — 以經典的雙間隙或無間隙問題打開

當片段進入 CMS 時，在編輯器中看起來舒適的間距可能會發生變化，因為區塊從目標樣式表接收邊距。由 br 分隔的兩個段落和兩行在結構上是不同的，即使一次預覽恰好給了它們相似的垂直距離。

ToolAcre 揭示了原始程式碼中的差異。它不帶有複製的邊距或內聯樣式，因此段落間距來自預覽包裝器或稍後的目標 CSS。編寫者應該按含義選擇結構並驗證序列化元素，而不是添加空白擊鍵，直到一個臨時視圖看起來正確為止。

Paragraph 和 div 是區塊容器； br 是另一個流中的空換行元素。此編輯器允許 p 和 br，但不允許 div。貼上的 div 被展開，保留其單詞並允許其後代，同時丟棄包裝器。清理後的 br 以 `<br />` 發出。

郵政地址可以是一個帶有故意換行符的段落，因為它的行構成一個單元。兩個獨立的想法最好用兩個段落來表示。目標可以一致地設定 p 邊距的樣式，而用作垂直間隔符的重複 br 元素將外觀直接編碼到內容中。

ToolAcre 不設定預設的段落分隔符號指令或截取 Enter。 contenteditable 瀏覽器處理該鍵，輸入偵聽器隨後刷新輸出。儲存庫限制警告引擎行為不同，因此斷言 Enter 始終創建 p、始終創建 div 或遵循特定於版本的規則將被發明為相容性指南。

然後，清理步驟會縮小到達的序列化範圍。瀏覽器建立的 div 無法作為 div 繼續存在，但其文字可以保留。這可能會使最終來源再次不同於即時中間樹。因此，當穩定的段落意義很重要時，來源模式是建立明確 p 元素的地方。

工具列沒有「軟中斷」按鈕，且程式碼沒有註冊 Shift+Enter。瀏覽器可以實現該手勢，但本文不承諾其輸出。源模式可以保留允許的 br，提供一種確定的方式來在檢查視覺結果後表達段落內的中斷。

鍵盤行為也取決於模組未測試的選擇和編輯狀態。使用您工作中涉及的確切瀏覽器，然後閱讀原始程式碼。如果手勢產生不需要的區塊，請明確重寫該片段，而不是依賴從另一個編輯器框架複製的捷徑描述。

對於位址，使用來源模式在收件者、街道和地點之間以 br 組成一個 p。為了簡短說明，創建兩個 p 元素。返回視覺模式，在插入之前對來源進行清理，並比較預覽，而不假設其邊距與最終網站相符。

然後複製 HTML 並與「下載 HTML」分開檢查該片段。複製的結果包含經過清理的正文標記；下載包含包含 ToolAcre 預覽版 CSS 的完整檔案。這種差異可以解釋為什麼打開下載的檔案看起來比將複製的片段貼到具有不同樣式的系統中更完整。

可以保留空的允許段落，因為 p 被接受且沒有規則刪除空白區塊。已知不間斷的空格實體可能會變成其解碼字符，並隨後根據本地實體實現進行轉義；該代碼沒有提供專門針對間隔段落的清理規則。

因此，「立即清理」並不是佈局清理器。它刪除了不支援的標記和屬性，平衡標籤和格式來源，但它可以保留結構上允許的空白。在來源或視覺模式下故意刪除間距偽影，並讓目標 CSS 提供正常邊距而不是累積空白區塊。

本文不涉及邊距折疊、框架分隔符號配置、瀏覽器鍵盤矩陣或電子郵件間距怪癖。它也沒有聲稱預覽版再現了 CMS。輕型沙盒使用自己的主體字體、行高、填充和中斷行為。

也不將過濾後的輸出視為普遍安全的出版品。惡意提交需要針對目標進行適當的伺服器端清理，即使一次性本地預覽仍然處於惰性狀態。段落語義、瀏覽器編輯行為和安全策略是三個獨立的問題，不應歸結為一個「看起來正確」的測試。

選擇與內容相符的中斷，但驗證而不是預測按鍵。 ToolAcre 提供直接來源訪問，接受 p 和 br，解開 div 並顯示沙盒渲染。這些事實支持可重複的工作流程，而無需發明有關 Enter 或 Shift+Enter 的承諾。

建立一個小地址並註釋，切換模式兩次，並確保預期的結構能夠經得起清理。如果目標應用了令人驚訝的間隙，請檢查其 CSS，而不是插入更多空 HTML。穩定的意義比調整到一個孤立的預覽的間距傳播得更好。