如何根据屏幕大小设置字体大小。我不希望文本突破到下一行

Question

我希望文本根据屏幕大小自动缩小或调整，以便它保持在一行中。我可以使用jquery来实现，但我不知道如何。

Answer 1

这是一个可能的jQuery解决方案。文本将始终适合包装并调整字体大小。

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>