如何根據屏幕大小設置字體大小。我不想文本闖入下一行

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>