Skip to content

Commit 16fd935

Browse files
linawolflinawolf
authored
[BUGFIX] Improve line breaking issues for tables (#902)
references TYPO3-Documentation/TYPO3CMS-Reference-CoreApi#4791
1 parent dab75dd commit 16fd935

File tree

4 files changed

+110
-5
lines changed

4 files changed

+110
-5
lines changed

‎Documentation-rendertest/Tables/TableDirective.rst

+72
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,75 @@ Table with caption and column width
2323
+--------------+--------------+
2424
| Row 2, Col 1 | Row 2, Col 2 |
2525
+--------------+--------------+
26+
27+
Large, complex table, break-none
28+
================================
29+
30+
31+
.. table:: Example Table
32+
:width: 100%
33+
:caption: My table caption
34+
:break: none
35+
36+
+----------+------------+----------+-----+------+----------------------+--------------------+----------------+----------------+-------+------------------+----------------+----------------+------------------------+
37+
| https:// | subdomain. | example. | com | :80 | /en | /about-us/our-team | /john-doe | /publications/ | index | .xhtml | ?utm_campaign= | seo | #start |
38+
+==========+============+==========+=====+======+======================+====================+================+================+=======+==================+================+================+========================+
39+
| Protocol | Subdomain | Domain | TLD | Port | Site Language Prefix | Slug | Enhanced Route | | | |
40+
+----------+------------+----------+-----+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
41+
| | Hostname | | | | Route Enhancer | Route Decorator | Query string | argument value | Location Hash / Anchor |
42+
+----------+-----------------------------+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
43+
| | Route / Permalink | |
44+
+-----------------------------------------------+--------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
45+
| URL (no arguments, unlike the URI) | | | |
46+
+--------------------------------------------------------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
47+
| URI (everything) |
48+
+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
49+
50+
51+
Large, complex table, break-line (default)
52+
==========================================
53+
54+
.. table:: Example Table
55+
:width: 100%
56+
:caption: My table caption
57+
58+
+----------+------------+----------+-----+------+----------------------+--------------------+----------------+----------------+-------+------------------+----------------+----------------+------------------------+
59+
| https:// | subdomain. | example. | com | :80 | /en | /about-us/our-team | /john-doe | /publications/ | index | .xhtml | ?utm_campaign= | seo | #start |
60+
+==========+============+==========+=====+======+======================+====================+================+================+=======+==================+================+================+========================+
61+
| Protocol | Subdomain | Domain | TLD | Port | Site Language Prefix | Slug | Enhanced Route | | | |
62+
+----------+------------+----------+-----+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
63+
| | Hostname | | | | Route Enhancer | Route Decorator | Query string | argument value | Location Hash / Anchor |
64+
+----------+-----------------------------+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
65+
| | Route / Permalink | |
66+
+-----------------------------------------------+--------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
67+
| URL (no arguments, unlike the URI) | | | |
68+
+--------------------------------------------------------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
69+
| URI (everything) |
70+
+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
71+
72+
73+
74+
Large, complex table, break-word
75+
================================
76+
77+
78+
.. table:: Example Table
79+
:width: 100%
80+
:caption: My table caption
81+
:break: word
82+
83+
+----------+------------+----------+-----+------+----------------------+--------------------+----------------+----------------+-------+------------------+----------------+----------------+------------------------+
84+
| https:// | subdomain. | example. | com | :80 | /en | /about-us/our-team | /john-doe | /publications/ | index | .xhtml | ?utm_campaign= | seo | #start |
85+
+==========+============+==========+=====+======+======================+====================+================+================+=======+==================+================+================+========================+
86+
| Protocol | Subdomain | Domain | TLD | Port | Site Language Prefix | Slug | Enhanced Route | | | |
87+
+----------+------------+----------+-----+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
88+
| | Hostname | | | | Route Enhancer | Route Decorator | Query string | argument value | Location Hash / Anchor |
89+
+----------+-----------------------------+------+----------------------+--------------------+-----------------------------------------+------------------+----------------+----------------+------------------------+
90+
| | Route / Permalink | |
91+
+-----------------------------------------------+--------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
92+
| URL (no arguments, unlike the URI) | | | |
93+
+--------------------------------------------------------------------------------------------------------------------------------------------------------+----------------+----------------+------------------------+
94+
| URI (everything) |
95+
+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
96+
97+

‎packages/typo3-docs-theme/assets/sass/components/_table.scss

+19-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.table {
2-
td {
3-
word-break: break-word;
2+
td, th {
3+
word-break: normal;
4+
line-break: auto;
45
}
56
th :last-child,
67
td :last-child {
@@ -13,6 +14,22 @@
1314
}
1415
}
1516

17+
.table.break-none{
18+
td, th {
19+
word-break: keep-all;
20+
line-break: strict;
21+
white-space: nowrap;
22+
overflow: visible;
23+
}
24+
}
25+
26+
.table.break-word{
27+
td, th {
28+
word-break: break-word;
29+
line-break: auto;
30+
}
31+
}
32+
1633
.table-responsive {
1734
table.table {
1835
margin-bottom: 0;

‎packages/typo3-docs-theme/resources/public/css/theme.css

+15-2
Original file line numberDiff line numberDiff line change
@@ -24956,8 +24956,9 @@ article *:hover > a.headerlink:after, article *:hover > a.permalink:after, artic
2495624956
padding: 0 !important;
2495724957
}
2495824958

24959-
.table td {
24960-
word-break: break-word;
24959+
.table td, .table th {
24960+
word-break: normal;
24961+
line-break: auto;
2496124962
}
2496224963
.table th :last-child,
2496324964
.table td :last-child {
@@ -24967,6 +24968,18 @@ article *:hover > a.headerlink:after, article *:hover > a.permalink:after, artic
2496724968
padding-top: 0;
2496824969
}
2496924970

24971+
.table.break-none td, .table.break-none th {
24972+
word-break: keep-all;
24973+
line-break: strict;
24974+
white-space: nowrap;
24975+
overflow: visible;
24976+
}
24977+
24978+
.table.break-word td, .table.break-word th {
24979+
word-break: break-word;
24980+
line-break: auto;
24981+
}
24982+
2497024983
.table-responsive {
2497124984
margin-bottom: 1rem;
2497224985
}

‎packages/typo3-docs-theme/resources/template/body/table/table-classes.html.twig

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@
1212
{%- if tableNode.hasOption('widths') -%}
1313
{%- set tableClasses = tableClasses ~ 'colwidths-' ~ tableNode.option('widths') ~ ' ' -%}
1414
{%- endif -%}
15-
{%- if tableNode.hasOption('grid') == 'grid' -%}
15+
{%- if tableNode.getOption('grid') == 'grid' -%}
1616
{%- set tableClasses = tableClasses ~ 'grid-' ~ tableNode.option('grid') ~ ' ' -%}
1717
{%- endif -%}
18+
{%- if tableNode.option('break') -%}
19+
{%- set tableClasses = tableClasses ~ 'break-' ~ tableNode.option('break') ~ ' ' -%}
20+
{%- endif -%}
1821

1922
{%- if tableClasses|trim %} class="{{ tableClasses|trim }}"{% endif -%}

0 commit comments

Comments
 (0)