feat: add configurable overflow-wrap for table cells #1
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add user-configurable overflow-wrap behavior for table header and body cells to prevent horizontal overflow with long, unbreakable content. **Changes** New CSS variables - `--vcw-set-table-head-overflow-wrap`: Controls word wrapping in table header cells (default: break-word) - `--vcw-set-table-body-overflow-wrap`: Controls word wrapping in table body cells (default: break-word) Style Settings integration - Added "Table head overflow wrap" dropdown setting with three options: - `break-word` (recommended): Breaks words only when necessary - `normal`: Only breaks at spaces (standard behavior) - `anywhere`: Breaks at any character to prevent overflow - Added "Table body overflow wrap" dropdown setting with same options - Enhanced descriptions with inline explanations for better UX CSS improvements - Refactored `preview.css`: nested table selectors for better maintainability - Refactored `source.css`: nested table editor selectors - Applied `overflow-wrap` to both preview mode (`div.el-table > table`) and source/editor mode (`.table-wrapper > table.table-editor`) - Targeted specific cell wrappers for precise control **Motivation** Tables with long URLs, code snippets, or compound words can cause horizontal overflow, breaking the reading experience especially in narrow panels. This change gives users control over how content wraps while maintaining a sensible default (break-word) that prevents overflow without being overly aggressive.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Add user-configurable overflow-wrap behavior for table header and body cells to prevent horizontal overflow with long, unbreakable content.
Changes
New CSS variables
--vcw-set-table-head-overflow-wrap: Controls word wrapping in table header cells (default: break-word)--vcw-set-table-body-overflow-wrap: Controls word wrapping in table body cells (default: break-word)Style Settings integration
break-word(recommended): Breaks words only when necessarynormal: Only breaks at spaces (standard behavior)anywhere: Breaks at any character to prevent overflowCSS improvements
preview.css: nested table selectors for better maintainabilitysource.css: nested table editor selectorsoverflow-wrapto both preview mode (div.el-table > table) and source/editor mode (.table-wrapper > table.table-editor)Motivation
Tables with long URLs, code snippets, or compound words can cause horizontal overflow, breaking the reading experience especially in narrow panels. This change gives users control over how content wraps while maintaining a sensible default (break-word) that prevents overflow without being overly aggressive.
Type of Change