Background of the issue:
I am trying to add Line Break CSS in the Elementor text box for a translated version of a page (Japanese) on my site. After editing and saving, it looks good. I have applied the global CSS to my theme global setting (the gem) and applied a CSS class to the Elementor text box like this: 新規ユーザー ボーナス.
Symptoms:
If I make any changes to the page in the default language (English) and save each language with ATE, the change on the Japanese text box disappears.
Questions:
How can we keep the page synchronized while maintaining the line-break CSS in the translated copy?
From your description, I understood that you Translated the contents first using WPML Translation Editor and later manually edited the Translation using Elementor Editor. Please note that the mix of translation methods you're using is not typically recommended, as it can lead to such conflicts. To avoid this issue, it's advisable to stick to one method of translation.
If you have started translating content using the ATE, please don't manually alter the translation using the WordPress Editor. Since the translation memory isn't shared between the translation method or editors, any manual changes you make will be overridden when you update the translation again using the ATE. I hope you can understand.
If you want to apply a line break using CSS for the translation, you can do that by specifically defining the CSS for that language, instead of manually making changes to the translation. You can target the Chinese language with CSS like this:
html[lang="zh-hans"] .your-css-class {
/* Specific styles for Chinese */
white-space: pre-wrap;
color: red; /* Example styling */
}
Replace .your-css-class with the actual class you're using (e.g., .line-break and value for lang with the actually lang value for the Chinese language. If you inspect the Chinese version, you'll see that value in the HTML tag.).
I hope you can understand. If you have any more questions or need further assistance, please feel free to reach out. I'll be happy to help.
Thank you! I would like to clarify the steps to make it work.
1. So I will apply the CSS you provided in the gem global custom CSS.
2. I only edit the translation in ATE but not edit with elementor.
3. When I need an line-break, for a specific position of the sentennse, for example.
"I want to fix the line break issue. "
Should I just press Enter at the position I wanna break?
Or I have to add a CSS code there in the ATE?
"I want to fix
the line break issue."
"I want to fix <be class=".your-css-class">
the line break issue."
And I want this line break to be applied screen width specific . For example:only Mobile will apply this line-break CSS rule.
I were able to make it work if I add the CSS class in elementor. but it was overwritten.
4. Since it's ATE, all the setting there won't be overwritten unless the default language has been changed.
