Background of the issue:
I am trying to manage French punctuation in WordPress, which requires spaces before characters like colons or question marks. On my site, hidden link, adding these spaces can cause unexpected line breaks, leaving punctuation marks on their own line. I am using WPML's advanced translation editor, but it doesn't seem to recognize shortcodes or non-breaking spaces to prevent this behavior.
Symptoms:
Unexpected line breaks occur with French punctuation, leaving punctuation marks hanging on their own line.
Questions:
What is a way to avoid unexpected line breaks with French punctuation in WPML's advanced translation editor?
I’ve reviewed your site, and the section shown in your screenshot appears fine on my end (tested on a MacBook Pro 13").
From what I can see, the issue seems to stem from the French version requiring more space due to longer text. The current margin/padding settings likely fit well for the English content but become tight in French, leading to layout issues.
To resolve this, you may want to manually increase the margin or padding specifically for the French version. Here’s how you can do that:
We have manually fixed the problem by removing the space, but this is incorrect for French grammar. Please reread my original question.
In French punctuation, a space is required before characters such as question marks and colons.
For example, the correct spacing in french would be:
Qu'est-ce que c'est ?
And not:
Qu'est-ce que c'est?
The screenshot shows the correct punctuation with a space before the question mark. This is a dynamic area with different kinds of text on every page. It is not possible to change padding for every different instance of the text. Changing the padding does not assist fully in any case as the size of the container changes according to screen size. This is also not the only place on the site where this occurs but is one example among many.
A proper fix would be to allow non-breaking spaces to be added via the WPML translation editor, but currently, it is ignoring all attempts to use non-breaking space characters.
Thank you for letting me know, this is the reply slightly adjusted to make sense out of context.
When using ATE you can add a non breaking space using
 
, however, there is a known issue with this that our team is working on resolving.
There are 2 workarounds at the moment
1. wrap the text in a span tag like this:
<span class="custom-nbsp">your text</span>
and add this CSS to the theme options page, style sheet or unter Customizer > Custom CSS:
.custom-nbsp {
white-space: pre;
}
2. Manually edit the translation outside of ATE and add the space.
- Edit the page in the default language
- Right-click on the language switcher in the top header (exit Guttenberg fullscreen to see)
- Switch to the translation and manually edit in the page builder to add the space (I believe you are currently doing this)
