Awkward word-breaking in tables due to word-break instead of overflow-wrap css #3935

Open
opened 2026-02-05 07:54:17 +03:00 by OVERLORD · 0 comments
Owner

Originally created by @wdoekes on GitHub (Jul 26, 2023).

Describe the Bug

See this:

image

If we add the following (custom) style:

body th, body td { word-break: inherit; overflow-wrap: break-word; }

Then things start to look a lot better.

image

Observed on version v22.10.2.

My apologies if this has been fixed already. My browsing through the source revealed only 386925ad8e but no change there. (Cannot upgrade today to test.)

Steps to Reproduce

The screenshots are a product of this:

Example:

| IP            | Service                 | Description |
| --------------| ----------------------- | ----------- |
| 192.168.12.17 | example-k8s-acc-api     | k8s-api - no DNS entry |
| 192.168.12.18 | example-k8s-acc-ingress | acceptance-abc.example.com, acceptance-ggz.example.com, acceptance-secure.example.com |
| 192.168.12.29 | example-k8s-acc-api     | api-acceptance-abc.example.com, api-acceptance-ggz.example.com, api-acceptance-secure.example.com |
| 192.168.12.74 | example-k8s-acc-ingress-secure | acceptance-secure.example.com |
| 192.168.12.75 | k8s-acc-api-secure      | api-acceptance-secure.example.com |

Expected Behaviour

Non-awkward wrapping. I had to resort to <div style="width:100px"></div> in various tables until I looked closer and found this css.

Screenshots or Additional Context

There might be good reasons to prefer word-break. But this simple tweak looks like it fixed many of my tables, so it might be better than what you have now.

Thanks for making bookstack!
Walter Doekes
OSSO B.V.

Browser Details

chromium 114.0.5735.198~linuxmint1+victoria

Exact BookStack Version

v22.10.2

PHP Version

8.0.25

Hosting Environment

https://hub.docker.com/r/linuxserver/bookstack :22.10.2

Originally created by @wdoekes on GitHub (Jul 26, 2023). ### Describe the Bug See this: ![image](https://github.com/BookStackApp/BookStack/assets/1225014/409e021f-481d-490e-8e38-7c3038c3e0e1) If we add the following (custom) style: ```css body th, body td { word-break: inherit; overflow-wrap: break-word; } ``` Then things start to look a lot better. ![image](https://github.com/BookStackApp/BookStack/assets/1225014/f8b8fa01-96a4-4c11-b006-3f286ef65b81) Observed on version v22.10.2. My apologies if this has been fixed already. My browsing through the source revealed only https://github.com/BookStackApp/BookStack/commit/386925ad8e8ac23dfca07084d7da0139dfcf78a6 but no change there. (Cannot upgrade today to test.) ### Steps to Reproduce The screenshots are a product of this: ``` Example: | IP | Service | Description | | --------------| ----------------------- | ----------- | | 192.168.12.17 | example-k8s-acc-api | k8s-api - no DNS entry | | 192.168.12.18 | example-k8s-acc-ingress | acceptance-abc.example.com, acceptance-ggz.example.com, acceptance-secure.example.com | | 192.168.12.29 | example-k8s-acc-api | api-acceptance-abc.example.com, api-acceptance-ggz.example.com, api-acceptance-secure.example.com | | 192.168.12.74 | example-k8s-acc-ingress-secure | acceptance-secure.example.com | | 192.168.12.75 | k8s-acc-api-secure | api-acceptance-secure.example.com | ``` ### Expected Behaviour Non-awkward wrapping. I had to resort to `<div style="width:100px"></div>` in various tables until I looked closer and found this css. ### Screenshots or Additional Context There might be good reasons to prefer word-break. But this simple tweak looks like it fixed many of my tables, so it might be better than what you have now. Thanks for making bookstack! Walter Doekes OSSO B.V. ### Browser Details chromium 114.0.5735.198~linuxmint1+victoria ### Exact BookStack Version v22.10.2 ### PHP Version 8.0.25 ### Hosting Environment https://hub.docker.com/r/linuxserver/bookstack :22.10.2
OVERLORD added the 🐛 Bug label 2026-02-05 07:54:17 +03:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#3935