When editing a CSS property value in the DevTools Styles pane and entering a very long value (e.g. a large number without spaces), the text extends beyond the visible area and is clipped. There is no horizontal scrollbar or wrapping to see the full value.
.demo-box element in the Styles pane.width value (200px) to edit it.Right-click this box and Inspect to reproduce
The .tree-outline li elements in the Styles pane had
white-space: normal (allows wrapping at spaces) but no
overflow-wrap: break-word. Long values without spaces did not wrap
and were clipped by the parent section's overflow: hidden.
The TextPrompt creates a proxy <span> with
display: inline-block that grows unconstrained with content width.
Even though li.child-editing has overflow-wrap: break-word,
the inline-block proxy prevents wrapping because it expands to fit content.
stylePropertiesTreeOutline.css1. Added overflow-wrap: break-word to .tree-outline li --
ensures long values wrap in the non-editing display.
2. Added max-width: 100% to the TextPrompt proxy span inside
li.child-editing via :has() selector -- constrains the
editing area so typed values wrap instead of overflowing.
/* Non-editing: long values now wrap */
.tree-outline li {
overflow-wrap: break-word; /* NEW */
}
/* Editing: constrain proxy span width */
.tree-outline li.child-editing {
> span:has(> .text-prompt-root) {
max-width: 100%; /* NEW */
}
}