Problem: Long text doesn’t wrap automatically in XS (iPhone).
To recreate problem:
- Launch Blocs.
- New document with Empty Page.
- Structure 1 Column Center
- Add a Paragraph inside your new Column.
- Type something really long, with no spaces, until it wraps.
- Preview XS in Blocs and note your text is a single line that rolls off toward the right into oblivion, getting truncated in the process. Preview in the Xcode simulator on an iPhone too, if you like, as it will show the same problem.
Editing the text wraps it nicely, as you would expect.
Previewing causes truncation, which is undesirable.
How do I get that kind of long text to automatically wrap instead of become truncated like that?
UPDATE: As per this Bootstrap 4 document, I added typed “text-break” into the Classes field with the Paragraph selected, and now the long text wraps. But I am curious. This seems to work well, so why isn’t it used by default in Blocs? In other words, what are the caveats to its use?
Here’s the actual web page on my site. Click “Example Data (FREE)” to scroll all the way down, so you can see the Password, which is long text. I added the “text-break” class to that section of text only. It seems to work fairly well.
On that same web page on my site, in the WIRING DATA SERVICE section, you will some some strangeness that I cannot fix with the “text-break” class. Below, please note that the word “our” is thrown to the next line even though there is plenty of space to the right of the word “of” on the previous line. Why?
The same thing on iPhone SE, but it’s worse because the word products is truncated at right.:
And on iPhone 7…
If I apply the “text-break” class to that paragraph and preview again, the words “of” and “our” are still broke into two separate lines, and on the iPhone SE, the word products is split strangely like this:
I thought it might be related to having links on VISION & SCIBORG, but after I deleted those links, line breaking (wrap) only gets worse!
So my question now is, how do I fix this kind of strange problem?