.wrap in index.css has incorrect word-break #5149

New Issue

GiteaMirror · 2025-11-02T06:15:59-06:00

GiteaMirror commented

2025-11-02 06:15:59 -06:00

Originally created by @nergdron on GitHub (Mar 30, 2020).

Gitea version (or commit ref): docker image (f0a8199e7e95)

Description

the .wrap CSS property in index.css (in both themes) has the styles:

word-wrap: break-word;
    overflow-wrap: break-word;
word-break: break-all;

the first two are fine, but the last causes things to break mid word, impeding readability. word-break: break-all; should be removed so it defaults to normal, which has much more reasonable behaviour.

Screenshots

Originally created by @nergdron on GitHub (Mar 30, 2020). - Gitea version (or commit ref): docker image (f0a8199e7e95) ## Description the `.wrap` CSS property in `index.css` (in both themes) has the styles: ``` word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; ``` the first two are fine, but the last causes things to break mid word, impeding readability. `word-break: break-all;` should be removed so it defaults to `normal`, which has much more reasonable behaviour. ## Screenshots ![gitea-default](https://user-images.githubusercontent.com/292681/77886128-28105b00-721d-11ea-8ae7-e32c2253db7a.png) ![gitea-green](https://user-images.githubusercontent.com/292681/77886148-2f376900-721d-11ea-928f-b4c342e1cebc.png)

GiteaMirror added the issue/confirmed topic/ui labels 2025-11-02 06:15:59 -06:00

GiteaMirror closed this issue

2025-11-02 06:16:00 -06:00

GiteaMirror commented

2025-11-02 06:16:00 -06:00

@silverwind commented on GitHub (Mar 30, 2020):

Yes it can be removed as overflow-wrap: break-word; should still suffice to break long works without whitespace in them.

@silverwind commented on GitHub (Mar 30, 2020): Yes it can be removed as `overflow-wrap: break-word;` should still suffice to break long works without whitespace in them.

GiteaMirror commented

2025-11-02 06:16:01 -06:00

@silverwind commented on GitHub (Apr 3, 2020):

Correction: overflow-wrap: break-word is not enough to break sequences without any whitespace, e.g. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa will not be broken so word-break: break-all is needed to ensure all strings are broken up which is important to prevent layout issues with overflown strings.

I think this issue is invalid.

@silverwind commented on GitHub (Apr 3, 2020): Correction: `overflow-wrap: break-word` is not enough to break sequences without any whitespace, e.g. `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa` will not be broken so `word-break: break-all` is needed to ensure all strings are broken up which is important to prevent layout issues with overflown strings. I think this issue is invalid.

GiteaMirror commented

2025-11-02 06:16:01 -06:00

@zeripath commented on GitHub (Apr 3, 2020):

Would hyphens: auto; help?

@zeripath commented on GitHub (Apr 3, 2020): Would `hyphens: auto;` help?

GiteaMirror commented

2025-11-02 06:16:01 -06:00

@silverwind commented on GitHub (Apr 3, 2020):

hyphens sucks imho, it introduces additional content and not all languages use hyphenization.

@silverwind commented on GitHub (Apr 3, 2020): `hyphens` sucks imho, it introduces additional content and not all languages use hyphenization.

GiteaMirror commented

2025-11-02 06:16:01 -06:00

@silverwind commented on GitHub (Apr 3, 2020):

Maybe overflow-wrap alone is actually worth a try. I can't reproduce the scenario of a uninterrupted string not breaking with it:

https://jsfiddle.net/silverwind/tzg8a6qv/

@silverwind commented on GitHub (Apr 3, 2020): Maybe `overflow-wrap` alone is actually worth a try. I can't reproduce the scenario of a uninterrupted string not breaking with it: https://jsfiddle.net/silverwind/tzg8a6qv/

GiteaMirror commented

2025-11-02 06:16:01 -06:00

@stale[bot] commented on GitHub (Jun 2, 2020):

This issue has been automatically marked as stale because it has not had recent activity. I am here to help clear issues left open even if solved or waiting for more insight. This issue will be closed if no further activity occurs during the next 2 weeks. If the issue is still valid just add a comment to keep it alive. Thank you for your contributions.

@stale[bot] commented on GitHub (Jun 2, 2020): This issue has been automatically marked as stale because it has not had recent activity. I am here to help clear issues left open even if solved or waiting for more insight. This issue will be closed if no further activity occurs during the next 2 weeks. If the issue is still valid just add a comment to keep it alive. Thank you for your contributions.

GiteaMirror commented

2025-11-02 06:16:02 -06:00

@stale[bot] commented on GitHub (Jun 17, 2020):

This issue has been automatically closed because of inactivity. You can re-open it if needed.

@stale[bot] commented on GitHub (Jun 17, 2020): This issue has been automatically closed because of inactivity. You can re-open it if needed.

GiteaMirror commented

2025-11-02 06:16:02 -06:00

@wxiaoguang commented on GitHub (Apr 25, 2023):

There is no.wrap in CSS anymore

@wxiaoguang commented on GitHub (Apr 25, 2023): There is no`.wrap` in CSS anymore

GiteaMirror referenced this issue

2025-11-02 14:54:28 -06:00