Skip to content

Commit 3c50320

Browse files
nnaydenownnaydenow
authored
fix(ui5-text): unify truncation across all max-lines values (#13624)
Previously, single-line truncation (max-lines="1") used a separate CSS. All other values relied on `-webkit-line-clamp` via a `:not([max-lines="1"])` selector. This split caused inconsistent behavior and required two code paths for what is semantically the same feature. Since `-webkit-line-clamp: 1` produces equivalent truncation to the `inline-block` approach, both cases are now handled by the single `-webkit-line-clamp` path. `Infinity` as the CSS variable value maps to `none` on `-webkit-line-clamp` (browsers treat an unrecognised/non-integer value as unset), so the default "no truncation" behaviour is preserved without an explicit reset rule. The core reasoning: max-lines="1" no longer needs its own display/whitespace block — -webkit-line-clamp: 1 does the same job, and Infinity as a CSS value is treated as none/unset by the browser, so no truncation applies at the default. In this change #13566 is reverted as well. Fixes: #10721
1 parent d760812 commit 3c50320

6 files changed

Lines changed: 63 additions & 38 deletions

File tree

‎packages/compat/src/TableCellTemplate.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ export default function TableCellTemplate(this: TableCell) {
77
part="cell"
88
role="cell"
99
>
10-
<div class="ui5-table-cell-content">
11-
<slot></slot>
12-
</div>
10+
<slot></slot>
1311
</td>
1412
);
1513
}

‎packages/compat/src/themes/TableCell.css‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,14 @@
55
height: var(--ui5_table_row_height);
66
box-sizing: border-box;
77
color: var(--sapList_TextColor);
8+
word-break: break-word;
89
vertical-align: middle;
9-
overflow: hidden;
10-
max-width: 0;
1110
}
1211

1312
td {
1413
display: contents;
1514
}
1615

17-
.ui5-table-cell-content {
18-
display: block;
19-
width: 100%;
20-
overflow: hidden;
21-
}
22-
2316
:host([popined]) {
2417
padding-left: 0;
2518
padding-top: .25rem;

‎packages/fiori/test/pages/F6TestPage.html‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -88,19 +88,11 @@
8888
<br><br>
8989

9090
<ui5-table class="demo-table" id="testRowClick">
91-
<ui5-table-column id="column-1" slot="columns">
92-
<ui5-label>City</ui5-label>
93-
</ui5-table-column>
94-
95-
<ui5-table-column id="column-2" slot="columns" min-width="500" popin-text="Supplier">
96-
<ui5-label>Supplier</ui5-label>
97-
</ui5-table-column>
98-
99-
<ui5-table-column id="column-3" slot="columns" min-width="500" popin-text="Country" demand-popin>
100-
<div class="column-content">
101-
<ui5-label>Country</ui5-label>
102-
</div>
103-
</ui5-table-column>
91+
<ui5-table-header-row slot="headerRow">
92+
<ui5-table-header-cell id="column-1">City</ui5-table-header-cell>
93+
<ui5-table-header-cell id="column-2" min-width="500px" popin-text="Supplier" popin-hidden>Supplier</ui5-table-header-cell>
94+
<ui5-table-header-cell id="column-3" min-width="500px" popin-text="Country" popin-hidden>Country</ui5-table-header-cell>
95+
</ui5-table-header-row>
10496

10597
<ui5-table-row data-city="Dublin">
10698
<ui5-table-cell><span id="testRowClickCell1">Dublin</span></ui5-table-cell>

‎packages/main/cypress/specs/Text.cy.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,9 @@ describe("Text", () => {
2222
cy.mount(<Text maxLines={1}>Text</Text>);
2323

2424
cy.get("[ui5-text]")
25-
.should("have.css", "display", "inline-block")
2625
.should("have.css", "overflow", "hidden")
27-
.should("have.css", "text-overflow", "ellipsis")
28-
.should("have.css", "white-space", "nowrap");
26+
.should("have.css", "-webkit-line-clamp", "1")
27+
.should("have.css", "-webkit-box-orient", "vertical");
2928
});
3029

3130
it("tests maxLines > 1", () => {

‎packages/main/src/themes/Text.css‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,6 @@
66
line-height: normal;
77
cursor: text;
88
overflow: hidden;
9-
}
10-
11-
:host([max-lines="1"]) {
12-
display: inline-block;
13-
text-overflow: ellipsis;
14-
white-space: nowrap;
15-
}
16-
17-
:host(:not([max-lines="1"])) {
189
display: -webkit-inline-box;
1910
-webkit-line-clamp: var(--_ui5_text_max_lines);
2011
line-clamp: var(--_ui5_text_max_lines);
@@ -23,6 +14,10 @@
2314
word-wrap: break-word;
2415
}
2516

17+
:host([max-lines="1"]) {
18+
word-break: break-all;
19+
}
20+
2621
.empty-indicator-aria-label {
2722
position: absolute !important;
2823
clip: rect(1px, 1px, 1px, 1px);

‎packages/main/test/pages/Text.html‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@
1212
<body>
1313
<ui5-text>Simple text</ui5-text>
1414

15-
<br><br>
16-
1715
<ui5-title level="H5">Long text</ui5-title>
16+
1817
<ui5-text id="text1">
1918
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
2019
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -24,7 +23,17 @@
2423

2524
<br><br>
2625

26+
<ui5-text id="text1" style="width: 6rem;">
27+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
28+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
29+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
31+
</ui5-text>
32+
33+
<br><br>
34+
2735
<ui5-title level="H5">Long text and max-lines 1</ui5-title>
36+
2837
<ui5-text id="text2" max-lines="1">
2938
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
3039
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -34,7 +43,17 @@
3443

3544
<br><br>
3645

46+
<ui5-text id="text2" max-lines="1" style="width: 6rem;">
47+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
48+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
49+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
50+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
51+
</ui5-text>
52+
53+
<br><br>
54+
3755
<ui5-title level="H5">Long text and max-lines 2</ui5-title>
56+
3857
<ui5-text max-lines="2">
3958
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
4059
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -44,7 +63,17 @@
4463

4564
<br><br>
4665

66+
<ui5-text max-lines="2" style="width: 6rem;">
67+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
68+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
69+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
70+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
71+
</ui5-text>
72+
73+
<br><br>
74+
4775
<ui5-title level="H5">Long text and max-lines 3</ui5-title>
76+
4877
<ui5-text empty-indicator-mode="On" max-lines="3">
4978
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
5079
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -54,7 +83,17 @@
5483

5584
<br><br>
5685

86+
<ui5-text empty-indicator-mode="On" max-lines="3" style="width: 6rem;">
87+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
88+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
89+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
90+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
91+
</ui5-text>
92+
93+
<br><br>
94+
5795
<ui5-title level="H5">Long text and max-lines 4</ui5-title>
96+
5897
<ui5-text max-lines="4">
5998
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
6099
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
@@ -64,6 +103,15 @@
64103

65104
<br><br>
66105

106+
<ui5-text max-lines="4" style="width: 6rem;">
107+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
108+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
109+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
110+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
111+
</ui5-text>
112+
113+
<br><br>
114+
67115
<ui5-title level="H5">Empty Indicator Mode</ui5-title>
68116
<ui5-switch id="emptyIndicatorMode" checked></ui5-switch>
69117
<ui5-text id="emptyText" empty-indicator-mode="On"></ui5-text>

0 commit comments

Comments
 (0)