Unwanted span tags with inline styles created when removing line breaks
OS: Any Any · Device: Desktop or Laptop Any · Browser: Chrome Latest · Keyboard: US
Open case →Scenario
Nested inline spans from formatting toggles
Repeated bold/italic toggles or browser execCommand can nest spans deeply—serialization, selection, and IME boundaries degrade.
formatting
Scenario ID
scenario-nested-inline-span-tags-created
Details
Repeated bold/italic toggles or browser execCommand can nest spans deeply—serialization, selection, and IME boundaries degrade.
Related Cases
References
Scenario flow
Visual view of how this scenario connects to its concrete cases and environments. Nodes can be dragged and clicked.
Variants
Each row is a concrete case for this scenario, with a dedicated document and playground.
| Case | OS | Device | Browser | Keyboard | Status |
|---|---|---|---|---|---|
| ce-0314-nested-inline-span-tags-created | Any Any | Desktop or Laptop Any | Chrome Latest | US | draft |
Cases
Open a case to see the detailed description and its dedicated playground.
Related Scenarios
Other scenarios that share similar tags or category.
Tags: span, dom
Deleted inline elements recreated when typing in contenteditable
After deleting an empty or inline element (e.g. span, b) inside contenteditable, typing causes the browser to recreate the deleted element, leading to unpredictable DOM and editor state.
1 case
Tags: formatting, dom
insertHTML breaks DOM structure and formatting
When using document.execCommand('insertHTML', ...) to insert HTML content into a contenteditable region, the DOM structure may be broken or reformatted unexpectedly. Nested elements may be flattened or reorganized.
1 case
Tags: formatting, nested
Nested formatting elements create complex DOM structures
Applying multiple formatting operations (bold, italic, underline, etc.) creates nested HTML elements that can become complex and hard to manage. Browsers handle nested formatting differently, and the resulting DOM structure can be inconsistent.
3 cases
Tags: formatting
Code block editing behavior varies across browsers
Editing text within code blocks (<pre><code>) in contenteditable elements behaves inconsistently across browsers. Line breaks, indentation, whitespace preservation, and formatting may be handled differently, making it difficult to maintain code formatting.
4 cases
Tags: dom
Empty elements accumulate in DOM during editing
During editing operations, empty elements (empty paragraphs, divs, spans with no content) accumulate in the DOM. These elements can cause layout issues, make the HTML bloated, and create unexpected behavior. Browsers handle empty element cleanup inconsistently.
5 cases
Comments & Discussion
Have questions, suggestions, or want to share your experience? Join the discussion below.