diff options
| author | silverwind <me@silverwind.io> | 2024-05-10 14:25:49 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-05-10 12:25:49 +0000 |
| commit | 5556782ebeb1ca4d17e2fff434b11651887b9899 (patch) | |
| tree | f8754d4a10a246e8a07aaf520d510f986a8a06d8 /web_src/css | |
| parent | 7424f27cf30065a1308aa3ba4d75ea82c0af4af9 (diff) | |
| download | gitea-5556782ebeb1ca4d17e2fff434b11651887b9899.tar.gz gitea-5556782ebeb1ca4d17e2fff434b11651887b9899.zip | |
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.
Diffstat (limited to 'web_src/css')
| -rw-r--r-- | web_src/css/features/console.css | 3 | ||||
| -rw-r--r-- | web_src/css/helpers.css | 1 | ||||
| -rw-r--r-- | web_src/css/repo.css | 2 | ||||
| -rw-r--r-- | web_src/css/shared/flex-list.css | 4 |
4 files changed, 4 insertions, 6 deletions
diff --git a/web_src/css/features/console.css b/web_src/css/features/console.css index 99fb25dae5..e2d3327cfa 100644 --- a/web_src/css/features/console.css +++ b/web_src/css/features/console.css @@ -5,8 +5,7 @@ color: var(--color-console-fg); font-family: var(--fonts-monospace); border-radius: var(--border-radius); - word-break: break-word; - overflow-wrap: break-word; + overflow-wrap: anywhere; } .console img { max-width: 100%; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index cf2e73572c..4d12dfaea2 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -5,7 +5,6 @@ Gitea's private styles use `g-` prefix. .gt-word-break { word-wrap: break-word !important; - word-break: break-word; /* compat: Safari */ overflow-wrap: anywhere; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index f02b2b7578..7f07e732a3 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -410,7 +410,7 @@ td .commit-summary { } .repository.file.list .non-diff-file-content .plain-text pre { - word-break: break-word; + overflow-wrap: anywhere; white-space: pre-wrap; } diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index 6217b45300..0f54779252 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -59,7 +59,7 @@ color: var(--color-text); font-size: 16px; font-weight: var(--font-weight-semibold); - word-break: break-word; + overflow-wrap: anywhere; min-width: 0; } @@ -74,7 +74,7 @@ flex-wrap: wrap; gap: .25rem; color: var(--color-text-light-2); - word-break: break-word; + overflow-wrap: anywhere; } .flex-item .flex-item-body a { |