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

您可以抓住调整大小事件

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

Answer 2

您可以对大小和一些jQuery Font属性使用递增/递减变量。

<a href="#"><p class="myclass">test</p></a>


mySize = 12;
$(this).click(function ()
              {
                mySize = mySize + 2;
                $(".myclass").css("font-size", mySize + "px" );
                console.log(mySize);

});

Answer 3

我是卡洛斯的第二个建议。您可以先定义mysize在调整div大小时应该如何更改：

var multiplicate = 0.7
var mySize = multiplicate*$( "#div-id" ).width();  
 $(".myText").css( "font-size", mySize + "px");

调整html中文本的属性

3 个答案: