WYSIWYG not displaying final result correctly in V13.0

Hi,

First post here, I’m new with Xwiki so pardon if my question seems trivial. I’m creating a simple template page at the moment and what I see in the WYSIWYG mode is correct according to what I wrote using the Xwiki syntax. However as soon as I press the save button the layout changes and is not displayed correctly.

Here are the source and what it looks like in WYSIWIG and then what happens when I click save.

Am I doing something wrong here?

SOURCE

Sorry can’t put multiple images in same post as I’m a new user.

WYSIWYG

SAVE

I’ll answer my own question as I think I figured out the problem. For some reason if the strings have to many characters without any spaces they don’t get wrapped around correctly.

Placing normal lorem ipsum text instead of the long string without spaces I had works just fine.

I don’t know if this is a bug or just how this is intended to work but I learned something. Maybe has to do with the css white space no wrap property?

In order for the browser to wrap the text, the text needs to have a break in it, where a break is a space, line return, or maybe some other character.

Thus, if I have 2 strings, “XXX XXXX” and “XXXXXXX”, the first one will wrap, while the second one will not, like so:

|-----|   (five space width)
|XXX  |   (line wrapped after the word break)
|XXXX |   (second line) of the first string)
|XXXXXXX| (7 characters extending beyond the edge; we cannot wrap automatically)
|-----|   (five space width)

css has different word wrap properties. Perhaps overriding the css and setting one of the other properties will work for you?

https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

perhaps:

word-wrap:break-word;

Using the wiki syntax you indicated (BTW, next time please paste the text) I get the same result / layout in WYSIWYG editor and in view mode: the text is not wrapped because it doesn’t have any space character and because the skin doesn’t force the line to break using CSS. I’m not sure why you get a different behavior, but it could be because you have some custom CSS.