There are two factors at work here. The first is the width of the containing column and the second is the fact that it’s all one line of text. In terms of it all being one line of text, there is no indication of where the soft line line breaks should occur. Therefore, blocs will just pick what it considers the most appropriate space in the text to make it fit the width of the containing column. Once you start selecting text and creating hyperlinks, the issue seems to worsen (don’t know why) but I usually overcome the problem by using double spaces before and after the pipe character. This tends to keep the wrap towards the end of the column width, rather than apparently breaking the line up too early in a random fashion.
In many respects, it may be preferable to create menus using the menu manager and then inserting the menus into the column. Each Menu would be given the name of the respective continent. You could then insert a navigation into the page and select the appropriate source menu. In my example, I used the “Include Logo” option on the navigation so I could include the region title. This means that the navigation will reduce down to a series of hamburgers at the smallest breakpoint which may be more convenient for mobile users. The screenshots below show how the menus are created and how they display at the various breakpoints.