How can I make sure text never is falling of the screen

Question

I have a little question about dealing with font size and window width. Sometimes my headers are just one long word and with smaller devices this word is falling of the screen so you only see a small part of the word.

How can I make sure that you always see the full word on every screen?

I have tried several css solutions but than the word breaks and continues on the next rule.

Thanks!

what do you mean falling of the screen? do you mean text goes to the next line ? — JF-Mechs, Apr 18 '16 at 07:19
yes but wat I actually want is that the headers are always on the same line and that the font size depends on the width of the screen. — Wilco Van Meppelen Scheppink, Apr 18 '16 at 07:27

JF-Mechs · Answer 1 · 2016-04-18T07:35:38.413

3

If you want that font-size depends on the width of the screen then you can just easily do it through media queries.

See demo.

h1 {
  font-size: 0.68em;
}
@media screen and (min-width: 768px) {
  h1 {
    font-size: 0.87em;
  }
}
@media screen and (min-width: 992px) {
  h1 {
    font-size: 1em;
  }
}
@media screen and (min-width: 1200px) {
  h1 {
    font-size: 1.5em;
  }
}

<h1>How can I make sure text never is falling of the screen This is a long header</h1>

You can also go here for more info about different media device screen size

See link

edited Apr 18 '16 at 07:35

answered Apr 18 '16 at 07:29

JF-Mechs

1,083
10
23

Thanks so much! Very interesting, I did not expect a css solution. What does 'em' actually mean? – Wilco Van Meppelen Scheppink Apr 18 '16 at 07:34
em means the width of a capital `M` character, you could change the size in px / pt or other units for the same effect – KWeiss Apr 18 '16 at 07:36
1

[why use em instead of px when defining styles in css](http://stackoverflow.com/questions/609517/why-em-instead-of-px) – JF-Mechs Apr 18 '16 at 07:37

score 1 · Answer 2 · answered Apr 18 '16 at 07:20

1

You can use media queries and adapt the text size to different screen sizes.

answered Apr 18 '16 at 07:20

Ciprianis

255
3
10

Hello! Thanks for your answer but I "don't know" the length of the headers so it has to be variable so it can never happen that the text is falling of the screen. – Wilco Van Meppelen Scheppink Apr 18 '16 at 07:26

score 1 · Accepted Answer · answered Apr 18 '16 at 07:37

1

If you really want a flexible solution, and already use jQuery for other reasons, you can easily use the jQuery-quickfit plugin that does exactly this.

answered Apr 18 '16 at 07:37

Nick Andriopoulos

10,313
6
32
56

Thanks! This looks very easy and safe for every scenario. I think this is the solution I'm going to use. – Wilco Van Meppelen Scheppink Apr 18 '16 at 07:46

How can I make sure text never is falling of the screen

3 Answers3