HTML & CSS How to make text responsive?

[Chris]

Hi,
I currently try to make a page responsive for the first time and have a problem concerning my text.
This is the mobile version how I want it.



The desktop version is also (more or less) fine for me:


My problem is, what comes in between:

I don't want these single words.

Maybe anybody can tell me a better way to make texts responsive?

Here you find the page: https://christophgrothe.github.io/home_plants/
This text is at the end of the page.
(I hope it's ok to insert a link to the page instead of directly posting the code?)

Best wishes,
Chris

 

[Johna]

I'm not sure you're able to control those single words, unless you add padding so that more words go on that line or make the text overflow out of the screen (not recommended).

(I hope it's ok to insert a link to the page instead of directly posting the code?)

Yeah, that's okay.

 

[Chris]

I'm not sure you're able to control those single words, unless you add padding so that more words go on that line or make the text overflow out of the screen (not recommended).



Yeah, that's okay.

Ok, and would you say, the way I edit the text and try to make it responsive is generally fine? Or would "best practise" look different?

 

[Johna]

Ok, and would you say, the way I edit the text and try to make it responsive is generally fine? Or would "best practise" look different?

Idk, because I'm on android and don't have the developer console, so I cant see your code.

 

[Malcolm]

Hmm, I'm thinking what you may be after is the style property word-break, this will allow you to specify whether or not to break words for the next line.

• word-break: break-word;
• word-break: normal;
• word-break: keep-all;
• word-break: break-all;

You can find more about word-break from MDN Web docs by clicking here.

 

[Chris]

Hmm, I'm thinking what you may be after is the style property word-break, this will allow you to specify whether or not to break words for the next line.

• word-break: break-word;
• word-break: normal;
• word-break: keep-all;
• word-break: break-all;

You can find more about word-break from MDN Web docs by clicking here.

Thanks for the hint, didn't know this property. However, neither with "word-break" nor by changing the width (instead of using padding) I manage to make to text look nice no matter which size the display is ( I always find a size in which a single word is in a row). Maybe my problem is my html? Normally I used for such a text for example a div or a section and then a row of p's. This time I used a single p for the whole text and then used "white-space: pre-line" to create seperate paragraphs/white-space.

 

[Johna]

This time I used a single p for the whole text and then used "white-space: pre-line" to create seperate paragraphs/white-space.

Idk what exactly you mean, but I use <br> for a line break.

<p>
  Here's one line break
  <br>
  Here's another line break
  <br>
  You can also add multiple line breaks
  <br><br>
  Just some random text to finish it off
</p>

 

[Chris]

Just tried it. Unfortunately also not what I was looking for, but thanks anyway