jquery - 调整html中文本的大小属性

Question

如何调整 div 中的文本大小由用户在前端。

对于用户在前面调整div的大小，我们可以使用css之类的

div {
    resize: both;
    overflow: auto;
}

或者使用 jquery

$( "#div-id" ).resizable();

要在前面的 div 中编辑文本，我们可以使用

<div id="div-id"  contenteditable="true"> Type text</div>

但是如何在 div 中制作可调整大小的文本。

示例:

用户可以更改此 div 内的文本 <div id="div-id" contenteditable="true"> Type text</div> ，但用户如何增加该 div 中的文本大小？

注意:实际上这个字体大小可以由用户更改。当前用户可以编辑文本。以同样的方式，用户可以增加字体大小

谢谢

Answer 1

你可以捕获resize事件

$( function() {
  var basefont = 14;
  var scale = 1;
  var width = $( "#div-id" ).width();
  $( "#div-id" ).resizable();
  $( "#div-id" ).on('resize', function() {
    scale = $(this).width() / width;
    $( "#div-id" ).css('font-size', scale*basefont);
  }); });

例子:

https://jsfiddle.net/e3q3zrrk/1/