Long text doesn't wrap in XS

Problem: Long text doesn’t wrap automatically in XS (iPhone).

To recreate problem:

  1. Launch Blocs.
  2. New document with Empty Page.
  3. Structure 1 Column Center
  4. Add a Paragraph inside your new Column.
  5. Type something really long, with no spaces, until it wraps.
  6. 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.
image

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.

RELATED QUESTION…

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.:
image

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:

image

I thought it might be related to having links on VISION & SCIBORG, but after I deleted those links, line breaking (wrap) only gets worse!
image

So my question now is, how do I fix this kind of strange problem?

On the pages you’re speaking about, you have minify the HTML code, so there’s not an easy way to have a look at your issue.
Generally, minifying HTML is not a good practice, there’s no indentation anymore & it’s also more confusing for the bots to achieve a proper indexation.

Thank you for your reply!

You seem to be arguing for the removal of more than 50% of Blocs’ Project Settings. :slight_smile:

My webpage is no longer minified as of right now. Please reload to see the code in all it’s spaced-out glory!

I doubt I am doing anything unique among Blocs users on that page, so I am eager to hear your findings. Thanks!

No i’m not, it was an intention purely informative. Minifiying is not a cleanup, only compression & optimization for certain files.
About HTML files , datas remain the same,it’s roughly a space managment

indentation is a considerable part of HTML langage unlike CSS for example. )

Basically what you’re saying is that the bad word spacing is “normal and there’s nothing anyone can do about it,” right?

Nope the opposite, there’s no spaces anymore after a HTML minification. However, if you don’t respect indentation, you’re likelly to forget a balise anywhere, therefore it can drastically alter your code.

  • If you also consider getting a well indexed site from Google engines, don’t minify this one… i may be wrong but that’s sounds obvious to me.

@Jerome
I certainly appreciate your thoughts, but let’s please forget about Minification for now. My original post has nothing to do with that, and even after I removed minification per your request, the “text spacing” problems described in my opening post remain. The suggestions I am seeking pertain to what I wrote in my opening post.

Thanks!

Tested a bit and tried a few things, maybe something is helpful. :slight_smile:

<!DOCTYPE html>
<html>
	<head>
		<style>
			p {
				width: 160px;
				border: 1px solid #000000;
			}
			p.text {
				word-break: break-all;
			}
			p.text-2 {
				word-break: break-word;
			}
			p.text-3 {
				word-break: keep-all;
				word-wrap: break-word;
				overflow-wrap: break-word;
				-webkit-hyphens: auto;
				-moz-hyphens: auto;
				-ms-hyphens: auto;
				hyphens: auto;
			}
		</style>
	</head>
	<body>
		<center>
			<h2>word-break: break-all;</h2>
			<p class="text">Verylonglonglongwords, The quick brown fox jumps over the very long word. Again a Veryverylonglonglongword.</p>
		</center>
		
		<center>
			<h2>word-break: break-word</h2>
			<p class="text-2">Verylonglonglongwords, The quick brown fox jumps over the very long word. Again a Veryverylonglonglongword.</p>
		</center>
		
		<center>
			<h2>word-break: keep-all; hyphens: auto;</h2>
			<p class="text-3">Verylonglonglongwords, The quick brown fox jumps over the very long word. Again a Veryverylonglonglongword.</p>
		</center>
	</body>
</html>

result:


I think, there’s not really THE solution, every solution has its flaws.

You could also try with all of these line wrapping properties (but don’t ask me what each one does exactly and which browser supports it. :slight_smile: ):

word-break: break-all;
word-break: break-word;
word-break: keep-all;
overflow-wrap: break-word;
hyphens: manual;
hyphens: auto;
line-break: loose;
line-break: strict;
line-break: anywhere;
text-wrap: balance;
1 Like

Thank you for your time in testing and putting all that together!

I actually spent over an hour yesterday testing Auto Hyphens. I decided against it. The Auto setting hyphenates like a madman, going so far as to hyphenate 3 or more lines in a row, which looks awful. I was able to prevent that with some clever code, but even that clever code doesn’t prevent silly things like hyphenating already hyphenated words. For example, if I write this…

This is a test of semi-hyphenated words.

The code would do something like this…

This is a test of semi-hyphen-
ated words.

Doing that is a no-no in English. So I gave up on Hyphens. But even when I was using Hyphens, the problem described in my " RELATED QUESTION…" (see my opening post and the screenshots there) remained unchanged. It’s really weird! I’d love to hear your thoughts on that!

Thanks.

Blocs inserts non-breaking spaces &nbsp; before and after the link, if you get rid of these, the text behaves normal again (see images).

with non-breaking space:

without non-breaking space:

:slight_smile:

1 Like

@Ghost

Thank you for sharing that keen observation! However, the natural question that results from that is this: how do I prevent Blocs from ever adding those non-breaking spaces before and after my links? I’ve got links everywhere! And as a result, Blocs really messes up the text spacing sometimes. It is especially noticeable in XS. What’s the trick to solve this problem?

Thanks!

I’m sorry, but at the moment I know of no other solution than to fix this problem outside of Blocs (in your Editor of choice), yes, this I is a bit annoying. :frowning:

It seems that this was discussed back in 2017, and @Norm felt some people might want to the non-breaking spaces so he did not do anything in Blocs to eliminate them. Curious why people would want them since they mess up the word spacing pretty badly in XS. Hmmm…

It is possible to use JavaScript to zap those wicked NBSPs into oblivion, but you would need to add that on every page where you have text, and of course that JS would slow things down a tad (perhaps not noticeable) on the browser side. Personally, I’d like a preference setting in Blocs to eliminate them before the HTML files are generated!

Anyway, below is the code I tested that replaces the NBPSs with normal spaces. It seems to improve things a bit when viewing in XS. Replace #bloc-14 with whatever your Bloc ID is or instead use document to zap those naughty NBPSs from all the blocs on the page.

<script>
function removeNbsp($el) {
  $el.contents().each(function() {
    if (this.nodeType === 3) {
      this.nodeValue = this.nodeValue.replace(/\u00A0/g, ' ');
    } else {
      removeNbsp( $(this) );
    }
  });
}
removeNbsp( $('#bloc-14') );
<script>

I’ve updated my web page with that code.

1 Like