Automatic word separation in case of lack of space.

mccs · Post by **mccs** » Wed Jan 28, 2026 4:23 pm

Automatic word separation in case of lack of space.

Default: Photogallery embedded in layout grid and page width 1080.
Active: Light Box Gallery. Type: magnificpopup.
Added 15 images, each with title and label.

Problem in mobile mode (title or label):
Long words don't fit into the virtual frame under the picture.
They cover a part of the text field of the next image.

Question:
Is there a soft hyphen to automatically separate words at a
matching syllable when the width is no longer sufficient?

Example:
(My required best line width.)
This is my too long textexample.

My wished output:
This is my too long text-
example.

The '-' should separate only if the width is not sufficient.

Maybe that's how it works?
This is my too long text-example. ('-' = normally not visible soft hyphen).

Is it possible? Thank you!

Post by **Pablo** » Wed Jan 28, 2026 4:39 pm

Do you have an example?

mccs · Post by **mccs** » Wed Jan 28, 2026 5:37 pm

Example-Link:
https://www.bnarr.de/fotoseite/Galerien ... kunst.html

I'm using Firefox and I'm decreasing the width for Responsive.

BaconFries · Post by **BaconFries** » Wed Jan 28, 2026 6:25 pm

From my understanding of how this works magnificpopup doesn't have a way to automatically separate words in long text description with a hyphen. To use Hyphenation it needs the like of word-wrap: break-word in the css to achieve this or you will simply have to insert the hyphen yourself.

crispy68 · Post by **crispy68** » Wed Jan 28, 2026 8:30 pm

Can you be specific on what slide you are seeing issues with? When I click on an image and it appears in the lightbox, I'm not seeing a real issue with the text/title for each. None of the titles are very long and seem to wrap in the lightbox just fine. Are you referring to the text/title below each pic and not in the light box? If so, why not change the number of columns for photogallery from 3 down to 1 at a particular breakpoint? Having 3 columns on a mobile doesn't look good anyway even if the text did wrap correctly.

crispy68 · Post by **crispy68** » Thu Jan 29, 2026 1:43 am

If you must keep your photo gallery columns at 3 (which I would urge you not to) and really want the words to 'break' wherever necessary, you can add CSS below between the <head> tags:

Code: Select all

<style>
#PhotoGallery1 .caption{overflow-wrap:anywhere;}
</style>

www.wysiwygwebbuilder.com

Automatic word separation in case of lack of space.

Automatic word separation in case of lack of space.

Re: Automatic word separation in case of lack of space.

Re: Automatic word separation in case of lack of space.

Re: Automatic word separation in case of lack of space.

Re: Automatic word separation in case of lack of space.

Re: Automatic word separation in case of lack of space.