[BUGFIX] Improve line breaking issues for tables (#902)

references TYPO3-Documentation/TYPO3CMS-Reference-CoreApi#4791
TYPO3-Documentation · Feb 2, 2025 · 16fd935 · 16fd935
1 parent dab75dd
commit 16fd935
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 5 deletions.
diff --git a/Documentation-rendertest/Tables/TableDirective.rst b/Documentation-rendertest/Tables/TableDirective.rst
@@ -23,3 +23,75 @@ Table with caption and column width
     +--------------+--------------+
     | Row 2, Col 1 | Row 2, Col 2 |
     +--------------+--------------+
+
+Large, complex table, break-none
+================================
+
+
+..  table:: Example Table
+    :width: 100%
+    :caption: My table caption
+    :break: none
+
+    +----------+------------+----------+-----+------+----------------------+--------------------+----------------+----------------+-------+------------------+----------------+----------------+------------------------+
+    | https:// | subdomain. | example. | com | :80  | /en                  | /about-us/our-team | /john-doe      | /publications/ | index | .xhtml           | ?utm_campaign= | seo            | #start                 |
+    +==========+============+==========+=====+======+======================+====================+================+================+=======+==================+================+================+========================+
+    | Protocol | Subdomain  | Domain   | TLD | Port | Site Language Prefix | Slug               | Enhanced Route                                             |                |                |                        |
+    +----------+------------+----------+-----+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
+    |          | Hostname                    |      |                      |                    | Route Enhancer                          | Route Decorator  | Query string   | argument value | Location Hash / Anchor |
+    +----------+-----------------------------+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
+    |                                               |  Route / Permalink                                                                                     |                                                          |
+    +-----------------------------------------------+--------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
+    | URL (no arguments, unlike the URI)                                                                                                                     |                |                |                        |
+    +--------------------------------------------------------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
+    | URI (everything)                                                                                                                                                                                                  |
+    +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+
+
+Large, complex table, break-line (default)
+==========================================
+
+..  table:: Example Table
+    :width: 100%
+    :caption: My table caption
+
+    +----------+------------+----------+-----+------+----------------------+--------------------+----------------+----------------+-------+------------------+----------------+----------------+------------------------+
+    | https:// | subdomain. | example. | com | :80  | /en                  | /about-us/our-team | /john-doe      | /publications/ | index | .xhtml           | ?utm_campaign= | seo            | #start                 |
+    +==========+============+==========+=====+======+======================+====================+================+================+=======+==================+================+================+========================+
+    | Protocol | Subdomain  | Domain   | TLD | Port | Site Language Prefix | Slug               | Enhanced Route                                             |                |                |                        |
+    +----------+------------+----------+-----+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
+    |          | Hostname                    |      |                      |                    | Route Enhancer                          | Route Decorator  | Query string   | argument value | Location Hash / Anchor |
+    +----------+-----------------------------+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
+    |                                               |  Route / Permalink                                                                                     |                                                          |
+    +-----------------------------------------------+--------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
+    | URL (no arguments, unlike the URI)                                                                                                                     |                |                |                        |
+    +--------------------------------------------------------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
+    | URI (everything)                                                                                                                                                                                                  |
+    +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+
+
+
+Large, complex table, break-word
+================================
+
+
+..  table:: Example Table
+    :width: 100%
+    :caption: My table caption
+    :break: word
+
+    +----------+------------+----------+-----+------+----------------------+--------------------+----------------+----------------+-------+------------------+----------------+----------------+------------------------+
+    | https:// | subdomain. | example. | com | :80  | /en                  | /about-us/our-team | /john-doe      | /publications/ | index | .xhtml           | ?utm_campaign= | seo            | #start                 |
+    +==========+============+==========+=====+======+======================+====================+================+================+=======+==================+================+================+========================+
+    | Protocol | Subdomain  | Domain   | TLD | Port | Site Language Prefix | Slug               | Enhanced Route                                             |                |                |                        |
+    +----------+------------+----------+-----+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
+    |          | Hostname                    |      |                      |                    | Route Enhancer                          | Route Decorator  | Query string   | argument value | Location Hash / Anchor |
+    +----------+-----------------------------+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
+    |                                               |  Route / Permalink                                                                                     |                                                          |
+    +-----------------------------------------------+--------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
+    | URL (no arguments, unlike the URI)                                                                                                                     |                |                |                        |
+    +--------------------------------------------------------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
+    | URI (everything)                                                                                                                                                                                                  |
+    +-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
+
+
diff --git a/packages/typo3-docs-theme/assets/sass/components/_table.scss b/packages/typo3-docs-theme/assets/sass/components/_table.scss
@@ -1,6 +1,7 @@
 .table {
-    td {
-        word-break: break-word;
+    td, th {
+        word-break: normal;
+        line-break: auto;
     }
     th :last-child,
     td :last-child {
@@ -13,6 +14,22 @@
     }
 }
 
+.table.break-none{
+    td, th {
+        word-break: keep-all;
+        line-break: strict;
+        white-space: nowrap;
+        overflow: visible;
+    }
+}
+
+.table.break-word{
+    td, th {
+        word-break: break-word;
+        line-break: auto;
+    }
+}
+
 .table-responsive {
     table.table {
         margin-bottom: 0;

diff --git a/packages/typo3-docs-theme/resources/public/css/theme.css b/packages/typo3-docs-theme/resources/public/css/theme.css
@@ -24956,8 +24956,9 @@ article *:hover > a.headerlink:after, article *:hover > a.permalink:after, artic
   padding: 0 !important;
 }
 
-.table td {
-  word-break: break-word;
+.table td, .table th {
+  word-break: normal;
+  line-break: auto;
 }
 .table th :last-child,
 .table td :last-child {
@@ -24967,6 +24968,18 @@ article *:hover > a.headerlink:after, article *:hover > a.permalink:after, artic
   padding-top: 0;
 }
 
+.table.break-none td, .table.break-none th {
+  word-break: keep-all;
+  line-break: strict;
+  white-space: nowrap;
+  overflow: visible;
+}
+
+.table.break-word td, .table.break-word th {
+  word-break: break-word;
+  line-break: auto;
+}
+
 .table-responsive {
   margin-bottom: 1rem;
 }

diff --git a/packages/typo3-docs-theme/resources/template/body/table/table-classes.html.twig b/packages/typo3-docs-theme/resources/template/body/table/table-classes.html.twig
@@ -12,8 +12,11 @@
 {%- if tableNode.hasOption('widths') -%}
     {%- set tableClasses = tableClasses ~ 'colwidths-' ~ tableNode.option('widths') ~ ' ' -%}
 {%- endif -%}
-{%- if tableNode.hasOption('grid') == 'grid' -%}
+{%- if tableNode.getOption('grid') == 'grid' -%}
     {%- set tableClasses = tableClasses ~ 'grid-' ~ tableNode.option('grid') ~ ' ' -%}
 {%- endif -%}
+{%- if tableNode.option('break') -%}
+    {%- set tableClasses = tableClasses ~ 'break-' ~ tableNode.option('break') ~ ' ' -%}
+{%- endif -%}
 
 {%- if tableClasses|trim %} class="{{ tableClasses|trim }}"{% endif -%}