diff --git a/src/modules/_vars.css b/src/modules/_vars.css index 14ad54f..7b56228 100644 --- a/src/modules/_vars.css +++ b/src/modules/_vars.css @@ -16,6 +16,9 @@ --vcw-set-callout-scale: 1.2; /* Callouts narrower than body text */ --vcw-set-padding-scale: 1; /* Multiplier for padding in wide mode */ --vcw-set-table-scale: 1; /* Multiplier for table width in wide mode */ + + --vcw-set-table-head-overflow-wrap: break-word; /* Overflow wrap style for table head cells */ + --vcw-set-table-body-overflow-wrap: break-word; /* Overflow wrap style for table body cells */ } /* ------------------------------- @@ -133,6 +136,28 @@ settings: max: 2 step: 0.05 + - id: vcw-set-table-body-overflow-wrap + title: Table body overflow wrap + description: "How long words wrap in table body cells. break-word: breaks words only if needed (recommended), normal: breaks only at spaces, anywhere: breaks at any character" + type: variable-select + scope: root + default: break-word + options: + - break-word + - normal + - anywhere + + - id: vcw-set-table-head-overflow-wrap + title: Table head overflow wrap + description: "How long words wrap in table header cells. break-word: breaks words only if needed (recommended), normal: breaks only at spaces, anywhere: breaks at any character" + type: variable-select + scope: root + default: break-word + options: + - break-word + - normal + - anywhere + - id: vcw-advanced-heading title: Advanced description: Fine-tune spacing and layout behavior diff --git a/src/modules/preview.css b/src/modules/preview.css index 63f874d..10c0eec 100644 --- a/src/modules/preview.css +++ b/src/modules/preview.css @@ -15,19 +15,29 @@ */ @container preview-readable (min-width: 0) { div.el-table { + /* Table wrapper */ margin-inline: var(--container-table-margin) !important; max-width: var(--container-table-max-width); min-width: var(--vcw-set-min-width); width: var(--container-table-width); padding-inline: 0 !important; - } - div.el-table > table { - margin-inline: var(--table-margin) !important; - max-width: var(--table-max-width); - min-width: var(--table-min-width); - table-layout: auto; - width: var(--table-width); - padding-inline: 0 !important; + & > table { + /* Table */ + margin-inline: var(--table-margin) !important; + max-width: var(--table-max-width); + min-width: var(--table-min-width); + table-layout: auto; + width: var(--table-width); + padding-inline: 0 !important; + & > thead > tr > th { + /* Table header cells */ + overflow-wrap: var(--vcw-set-table-head-overflow-wrap); + } + & > tbody > tr > td { + /* Table data cells */ + overflow-wrap: var(--vcw-set-table-body-overflow-wrap); + } + } } div.el-h1 { diff --git a/src/modules/source.css b/src/modules/source.css index c62dedd..2a64181 100644 --- a/src/modules/source.css +++ b/src/modules/source.css @@ -29,11 +29,17 @@ padding-inline: 0 !important; max-width: var(--table-max-width); margin-inline: auto; - } - .table-wrapper > .table-editor { - max-width: var(--table-max-width); - width: var(--table-width); - margin-inline: 0 !important; + & > table.table-editor { + max-width: var(--table-max-width); + width: var(--table-width); + margin-inline: 0 !important; + & > thead > tr > th > .table-cell-wrapper { + overflow-wrap: var(--vcw-set-table-head-overflow-wrap); + } + & > tbody > tr > td > .table-cell-wrapper { + overflow-wrap: var(--vcw-set-table-body-overflow-wrap); + } + } } }