css - Title has word broken when viewed in mobile

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I am designing a website using the Renden Free theme, and my problem is that some long titles, when viewed in mobile, have words broken in half. For example:

As you can see, the word "Corporal" gets broken and split in two lines.

Why is this? Is there any way to control where does Wordpress split the title?

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I am designing a website using the Renden Free theme, and my problem is that some long titles, when viewed in mobile, have words broken in half. For example:

As you can see, the word "Corporal" gets broken and split in two lines.

Why is this? Is there any way to control where does Wordpress split the title?

• css
• html
• responsive
• screen-layout

Share Improve this question asked Feb 18, 2019 at 17:59 PaulJPaulJ 15811 silver badge88 bronze badges 2

• 1 That's a CSS question rather than a WordPress-specific one. You'll most likely do best to contact the theme developer and ask, or if you want to do some research yourself, determine where you can include custom CSS (whether you need a child theme, or if your theme supports some custom CSS - some do in the Customizer) and either make the font size smaller, or else use a property such as white-space so that words stay all on one line if possible. – WebElaine Commented Feb 18, 2019 at 18:17
• Corporaly has spaces in it. If you want to keep the spaces, please use   instead of real spaces. – SequenceDigitale Commented Apr 20, 2020 at 14:54

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 2

It's possible that a word-break CSS rule could fix the problem. You could apply it globally with this

body {word-break:normal !important; }

Or maybe this:

body {overflow-wrap: normal;}

But it might be better to apply that to the specific class/id used by the title. And ever further tweak it to only apply that rule to smaller screens via the media query.

But you could add the above to 'additional CSS' in your theme customization to see if that will help.

Asking the theme developer support area is the best place for this question, though.

on your style-responsive.css file around line #127

#intro .page-title {
        font-size: 30px
    }

Change that to 20px or less, 30 is too big for small screens from a design standpoint.

Obviously "word-break: '';" will edit how the word responds to the end of the container. But, when responsive along with the word-break I sometimes calculate the font-size as a vw value.

Say you have a title with the font-size of 32px; when you hit the wall of container at say 480px, you can figure out the width of the text at keep it constant. The math would be:

Your width: 480. Divided by the width of the doc 100%.

480 / 100 = 4.8 (one percent of the width).

Then you need to work out how many of these are required to maintain the 32px size.

32 / 4.8 = 6.666666vw.

So you can then create a css rule like:

.title {
    font-size: 32px;
}
@media screen and (max-width: 479px) {
    .title {
        font-size: 6.666666vw;
    }
}

This will create text that can scale with the page.