-6

I want the text to shrink or adjust itself automatically according to screen size so that it stays in one line. It can be achieved using jquery I guess but I don't know how.

Abhishek Sarwan
  • 66
  • 4
  • use `em` instead of `px`. Check this thread - https://stackoverflow.com/questions/609517/why-em-instead-of-px – Clock Slave Aug 14 '17 at 08:31
  • 1
    Take the [tour](https://stackoverflow.com/tour) and read through the [help center](https://stackoverflow.com/help) to improve your question and learn why you are receiving downvotes – Milan Chheda Aug 14 '17 at 08:31

1 Answers1

0

Here's a possible jQuery solution. The text will always fit in the wrapper and adjust the font-size.

function fontSize(){
  var fontwidth = $('.wrapper p').width();
  var divwidth = $('.box').width();
  var size = parseFloat($('.wrapper p').css('font-size'));
  var fontsize = (divwidth / fontwidth) * size - 10;

  $('.wrapper p').css("font-size", fontsize);
}

$(window).resize(function(){
  fontSize();
});
$(document).ready(function(){
  fontSize();
});
.wrapper{
  border:2px solid lightgrey;
  width:80%;
  padding:5px;
}
body{
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.box p{
  font-size: 1em;
  font-weight: 900;
  display:inline-block;
  font-family: Helvetica, Arial, Sans-Serif;
  line-height:1;
  margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
 <div class="box"><p>Some text</p></div>
</div>
Tobias Glaus
  • 3,008
  • 3
  • 18
  • 37