mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

Forbid deprecated `break-word` in CSS (#30934) 

Forbid
[deprecated](https://drafts.csswg.org/css-text-3/#word-break-property)
`break-word` and fix all occurences.

Regarding `overflow-wrap: break-word` vs `overflow-wrap: anywhere`:

Example of difference: https://jsfiddle.net/silverwind/1va6972r/

[Here](https://stackoverflow.com/questions/77651244) it says:

> The differences between normal, break-word and anywhere are only clear
if you are using width: min-content on the element containing the text,
and you also set a max-width. A pretty rare scenario.

I don't think this difference will make any practical impact as we are
not hitting this rare scenario.

(cherry picked from commit 5556782ebeb1ca4d17e2fff434b11651887b9899)
This commit is contained in:
silverwind 2024-05-10 14:25:49 +02:00 committed by Earl Warren
parent 38ea77ebbe
commit 51f6c3a059
No known key found for this signature in database
GPG Key ID: 0579CB2928A78A00
5 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
stylelint.config.js
View File

@ -150,7 +150,7 @@ export default {
'declaration-property-unit-allowed-list': null, 'declaration-property-unit-allowed-list': null,
'declaration-property-unit-disallowed-list': {'line-height': ['em']}, 'declaration-property-unit-disallowed-list': {'line-height': ['em']},
'declaration-property-value-allowed-list': null, 'declaration-property-value-allowed-list': null,
'declaration-property-value-disallowed-list': null, 'declaration-property-value-disallowed-list': {'word-break': ['break-word']},
'declaration-property-value-no-unknown': true, 'declaration-property-value-no-unknown': true,
'font-family-name-quotes': 'always-where-recommended', 'font-family-name-quotes': 'always-where-recommended',
'font-family-no-duplicate-names': true, 'font-family-no-duplicate-names': true,

3
web_src/css/features/console.css
View File

@ -5,8 +5,7 @@
color: var(--color-console-fg); color: var(--color-console-fg);
font-family: var(--fonts-monospace); font-family: var(--fonts-monospace);
border-radius: var(--border-radius); border-radius: var(--border-radius);
word-break: break-word; overflow-wrap: anywhere;
overflow-wrap: break-word;
} }
.console img { max-width: 100%; } .console img { max-width: 100%; }

1
web_src/css/helpers.css
View File

@ -5,7 +5,6 @@ Gitea's private styles use `g-` prefix.
.gt-word-break { .gt-word-break {
word-wrap: break-word !important; word-wrap: break-word !important;
word-break: break-word; /* compat: Safari */
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }

2
web_src/css/repo.css
View File

@ -418,7 +418,7 @@ td .commit-summary {
} }
.repository.file.list .non-diff-file-content .plain-text pre { .repository.file.list .non-diff-file-content .plain-text pre {
word-break: break-word; overflow-wrap: anywhere;
white-space: pre-wrap; white-space: pre-wrap;
} }

4
web_src/css/shared/flex-list.css
View File

@ -59,7 +59,7 @@
color: var(--color-text); color: var(--color-text);
font-size: 16px; font-size: 16px;
font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold);
word-break: break-word; overflow-wrap: anywhere;
min-width: 0; min-width: 0;
} }
@ -74,7 +74,7 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: .25rem; gap: .25rem;
color: var(--color-text-light-2); color: var(--color-text-light-2);
word-break: break-word; overflow-wrap: anywhere;
} }
.flex-item .flex-item-body a { .flex-item .flex-item-body a {