Fix how long URLs appear in Chrome/Chromium #5

New Issue

simoon · 2022-02-28T16:08:46+01:00

simoon commented

2022-02-28 16:08:46 +01:00

Reporting this issue while developing a newsletter publication with the following CSS properties on the root element:

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

This is to allow words to break across columns, and renders as expected in both Chrome and Firefox. However, in Chrome, some text sequences in URLs (e.g. long hashes of numbers after trailing slashes) do not break.

This is an issue reported on elsewhere: https://stackoverflow.com/questions/21299403/chrome-long-url-in-table-issue

The solution suggested is to add the class "break" judiciously to HTML elements that need to break, and add the collowing CSS:

td.break {
    word-break: break-all;
}

This forces the line of the URL to break, but it breaks across columns and then the URLs become unclickable.

Reporting this issue while developing a newsletter publication with the following CSS properties on the root element: ``` overflow-wrap: break-word; word-wrap: break-word; ``` This is to allow words to break across columns, and renders as expected in both Chrome and Firefox. However, in Chrome, some text sequences in URLs (e.g. long hashes of numbers after trailing slashes) do not break. This is an issue reported on elsewhere: https://stackoverflow.com/questions/21299403/chrome-long-url-in-table-issue The solution suggested is to add the class "break" judiciously to HTML elements that need to break, and add the collowing CSS: ``` td.break { word-break: break-all; } ``` This forces the line of the URL to break, but it breaks across columns and then the URLs become unclickable.

Sign in to join this conversation.

No Label

No Milestone

No project

No Assignees

1 Participants

Notifications

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: CC/octomode#5