使用css和html根据文本长度动态改变字体大小 [英] dynamically changing the size of font size based on text length using css and html

问题描述

我需要将用户输入的文本显示为固定大小的div。我想要的是字体大小自动调整，以便文本尽可能填充框。

我可能想要以最大字体大小，而文本太大而不适合容器，请缩小字体大小直到适合并且字体必须显示为单行。是否有可能只用css和html来做到这一点。

解决方案

 < div id =outerstyle =width：200px; height：20px; border：1px solid red;> 
< div> Lorem ipsum dolor坐amet，consectetur adipiscing elit。整数mollis dui felis，vel vehicula tortor cursus nec< / div> 
< / div> 
  

然后您可以执行下列操作：

<$ （）;
resize_to_fit（）;
}）;

function resize_to_fit（）{
var fontsize = $（'div＃outer div'）。css（'font-size'）;
$（'div＃outer div'）。css（'fontSize'，parseFloat（fontsize） - 1）; $（$'$＃
$ b if（$（'div＃outer div'）。height（）> = $（'div＃outer'）。height（））{
resize_to_fit（）

工作示例

$（document）.ready（function（）{resize_to_fit（）;}） ; function resize_to_fit（）{var fontsize = $（'div＃outer div'）。css（'font-size'）; $（'div＃outer div'）。css（'fontSize'，parseFloat（fontsize） - 1）; if（$（'div＃outer div'）。height（）> = $（'div＃outer'）。height（））{resize_to_fit（）; }}

< script src =https：// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><div id =outerstyle =width：200px; height：20px; border： 1px纯红色;> < div> Lorem ipsum dolor sit amet，consectetur adipiscing elit。整数mollis dui felis，vel vehicula tortor cursus nec< / div>< / div>

I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.

I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.

解决方案

Say you have this:

<div id="outer" style="width:200px; height:20px; border:1px solid red;">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>

Then you can do something like:

$(document).ready(function () {
    resize_to_fit();
});

function resize_to_fit(){
    var fontsize = $('div#outer div').css('font-size');
    $('div#outer div').css('fontSize', parseFloat(fontsize) - 1);

    if($('div#outer div').height() >= $('div#outer').height()){
        resize_to_fit();
    }
}

Working Sample

$(document).ready(function() {
  resize_to_fit();
});

function resize_to_fit() {
  var fontsize = $('div#outer div').css('font-size');
  $('div#outer div').css('fontSize', parseFloat(fontsize) - 1);

  if ($('div#outer div').height() >= $('div#outer').height()) {
    resize_to_fit();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>

这篇关于使用css和html根据文本长度动态改变字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！