Good day.

There was a need to implement a rubber text. There is a rubber block

min-width: 300px; max-width: 700px;

It contains 28-pixel text in one line. It is necessary to make so that at reduction of the screen also together with the rubber block the size of a font would decrease, thus the text also should be written in one line.

Link to jsfiddle.

If this is impossible to implement through normal html and css, then please help with a small js script.

I ask your help in the implementation of this issue.

  • 2
    Of course, you have already chosen the best answer, but here is an example of jsfiddle.net/ubhqwzb3 - see how much extra code in the examples below - user33274

3 answers 3

Well, something like that.

 $(window).resize(function(){ var text = $(".connect p"), currentWidth = parseInt(text.css("width")), newWidth = 28; if(currentWidth==700) newWidth = 28; else if (currentWidth<700 && currentWidth>=600) newWidth = 25; else if (currentWidth<600 && currentWidth>=500) newWidth = 21; else if (currentWidth<500 && currentWidth>=300) newWidth = 16; text.css("font-size",newWidth+"px"); });

True, you will need to figure out how to calculate these newest pixels. After all, different fonts have different letter sizes, and then you need to count the number of characters, read the width of the string of them, and adjust the font size to fit them.

  • one
    A small upgrade and now the text, immediately when the page loads, comes in one line. - alvoro
  • @Alex Krass, thank you very much for your help, but tell me, is it possible to implement the following via javascript: There are screen resolutions from 1280px to 760 that you need to change the text size to 0.5px every 20 pixels to change the screen size: else if (currentWidth <700 && currentWidth> = 680) newWidth = 25; else if (currentWidth <680 && currentWidth> = 660) newWidth = 24.5; etc. Is it possible to do something like a cycle? I'm in javascript in general 0 :( I ask for your help. Thanks in advance! - KeH192
  • @ KeH192, you can derive the dependency and assume from it: jsfiddle.net/cL8je/1 newFontSize = newFontSize - ((maxWidth - currentWidth) / 20) * 0.5; - Alex Krass
  • @Alex Krass, thank you, but for some reason, when integrating this script, it turned out like this: filebeam.com/2e5b750003292de40369efc42aa998c2.jpg I have the style file connected in another file. The script is inserted into the cap. But for some reason he counted everything in 2.9 pixels :) - KeH192
  • @ KeH192, this forum is more designed for help, with the expectation that, according to the example, a person himself will be able to adapt the script to fit his needs. As you put it, you are in javascript in general 0, so probably you do not understand how it works. In this case, the min- and max-width are indicated on the basis of which it counts (you do not have them). If you take the screen, then you need to substitute its values, just to use this script for another task does not work, you need to adapt it. For the screen like this: jsfiddle.net/x7UgP And the script is still not perfect yet and you may not be able to go without further improvement. - Alex Krass

This can be done with css. Demonstration of work

 <div class="connect"> <p>Небольшой текст написанный в одну строчку</p> </div> 
 @media screen and (min-width: 700px) { .connect p { font-size: 28px; } } @media screen and (min-width: 600px) and (max-width: 699px) { .connect p { font-size: 25px; } } @media screen and (min-width: 500px) and (max-width: 599px) { .connect p { font-size: 21px; } } @media screen and (min-width: 300px) and (max-width: 499px) { .connect p { font-size: 14px; } }

    The option is even easier I met here: Can I make a rubber font in css?

     .connect p { font-size: 3vw; /* 3% of viewport width */ }