问 使用css和html根据文本长度动态改变字体大小

EN

假设你有这个：

<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>

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

$(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();
}

工作样本

​

$(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>

​

基于这里顶层 answer 的逻辑，我创建了一个no-jQuery版本，

​

const input = document.querySelector('input');
const output = document.querySelector('.output');
const outputContainer = document.querySelector('.container');
function resize_to_fit() {
  let fontSize = window.getComputedStyle(output).fontSize;
  output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
  if(output.clientHeight >= outputContainer.clientHeight){
    resize_to_fit();
function processInput() { 
  output.innerHTML =this.value;
  output.style.fontSize = '100px'; // Default font size
  resize_to_fit();
input.addEventListener('input', processInput);

<input type="text" placeholder="Add text input here" style="margin: 10px; width:50%;">
<div id="outer" class="container" 
style="width:80%; height:100px; border:2px solid red; font-size:20px;">
<div class="output" style="word-break: break-all; word-wrap: break-word;">
</div>

​

获取文本字符串的像素大小是一件很难做的事情，并且在很大程度上取决于浏览器和用户的设置，因此可能很难想出一个在所有情况下都有效的解决方案。

“显示用户输入的文本”是指用户正在文本框中键入内容吗？如果是这样，您可以附加一个按键侦听器来检查文本值的长度，然后相应地调整 font-size 。下面是一个示例，不过您可能需要更改长度和字体大小以满足您的需要：

$('#text').on('keypress', function(e) {
    var that = $(this),
        textLength = that.val().length
    if(textLength > 30) {
        that.css('font-size', '5px');