H1 is cut off mid-word on mobile - any ideas why this is happening?

HTML & CSS
1

Hi, I have an issue on this site I’ve created for a client. The words in the second header on the page are cut off mid-word when viewing it on a mobile etc. Here’s an example: http://smartpoolsolutions.com/en/swimming-pool-services-costa-brava/costa-brava-energy-efficient-swimming-pool-pumps/ - notice how it reads:

SAVE ENERGY WITH
EFFICIENT
SWIMMING POOL PUM
PS

Any idea why it cuts off ‘PUMPS’ instead of just dropping it to the next line?

Thanks for your help,

Konrad

2

It might have something to do with this:

.break, p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

Although I don’t know why it doesn’t affect the other words in the heading.

2 Likes
3

The logo image in your header is making horizontal scrollers on the small screen too.
Try giving it 100% width.

img.custom-logo {
	max-width: 400px;
	padding: 10px 0 0 0;
	margin: 0;
	width: 100%; /* Added this */
}
4

Because you made three words into one word by using nonbreaking spaces and therefore the browser has no clue where to break the sentence apart from the letters that don’t fit.

<h1>Save energy with efficient Swimming&nbsp;Pool&nbsp;Pumps</h1>

I’m guessing the author wanted those three words to break to a new line together but didn’t think of smaller screens. You would probably be better putting ‘swimming pool pumps’ inside a span and then set the span to display:block to keep it on a new line.

If you then remove the non breaking spaces &nbsp; and replace them with normal spaces then the words will wrap correctly.:slight_smile:

6 Likes
5

Hi @konradvg
In this case I think it could also be solved by inserting the <wbr> element in the html. It acts as a marker for wordbreaks but doesn’t introduce a hyphen and is a zero length.

E.g: <h1>Save energy with efficient Swimming&nbsp;<wbr>Pool&nbsp;<wbr>Pumps</h1>

https://www.w3.org/TR/html5/text-level-semantics.html#the-wbr-element

Edit)
@PaulOB, please save me if I’m in too deep water here. :blush:

1 Like
6

lol - I think that by adding the wbr tag you are in fact doing exactly the same as this:

<h1>Save energy with efficient Swimming Pool Pumps</h1>

I’m guessing that “swimming pool pumps” should initially wrap as a block to the new line or indeed start on a new line to begin with.

If the viewport is narrower than the width of the text then the words should be allowed to wrap individually which is what will happen with a span set to display:block.

e.g.

<h1>Save energy with efficient <span>Swimming Pool Pumps</span></h1>


h1 span{display:block}

Of course it does depend on what the authors intentions were :slight_smile:

1 Like
7

I’ve done similar things before, only setting the span to display: inline-block. This lets it appear as one line on a big screen, but when it wraps on smaller screens, you control where the break occurs. It can prevent the last word getting orphaned on the new line.

3 Likes
8

[OT]
Thanks, hopefully I’ll have my brain back soon. :zipper_mouth:

Edit)
I’d vote for Sam’s solution. :wink:

2 Likes
9

A demo page in case the OP wants to play with it.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Word Break Tester</title>
<!--
https://www.sitepoint.com/community/t/h1-is-cut-off-mid-word-on-mobile-any-ideas-why-this-is-happening/270442/
-->
    <style>
h1 {
    color:#d17000;
    font-weight:400;
    font-size:2.25rem;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height:1.2;
    text-transform:uppercase;
    text-align:center;
    letter-spacing:2px;
    word-spacing:2px;
    margin:1.5em 0;
}
h1 {
    overflow-wrap:break-word;
}
.blk {
    display:block;
}
.inblk {
    display:inline-block;
}

    </style>
</head>
<body>

<h1>Save energy with efficient Swimming&nbsp;Pool&nbsp;Pumps</h1>

<h1>Save energy with efficient <span class="blk">Swimming Pool Pumps</span></h1>

<h1>Save energy with efficient <span class="inblk">Swimming Pool Pumps</span></h1>

</body>
</html>
2 Likes
10

It depends on whether you want the end phrase to start underneath to start with but apart from that the block and inline-block will work the same.:slight_smile:

2 Likes
11

Thanks folks for all your input and apologies for the late reply - holidays!

I appreciate your workarounds etc but the issue isn’t that I (or the author) wanted certain words to be placed together on the same line, we’re happy for the browser width to determine how the text flows. But obviously not break mid word…

The strange thing is that when I look in the WP admin and change to source for that text area I cannot see any of the &nbsp; characters you discovered. See screenshot below:

937×626 54.7 KB

I always run my copy through TextEdit to clean it up so don’t understand where these have come from? But the main thing is I can’t see them so can’t see how to remove them?

Thanks for your help!

Konrad

12

Sorry, I don’t know anything about WP so can’t really help. Don’t you have an option to turn on invisible characters?

You can see the non breaking spaces in the chrome web inspector on the live version so I guess you could just look through the pages and see where they were and then go back and edit those sentences. (I looked through a couple of pages and didn’t notice any others though.)

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.