Изменить размер свойства для текста в html

Question

Как изменить размер текста внутри 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.

<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

I второе предложение Карлоса. Вы могли бы сначала определить, каким образом mysize должен меняться при изменении размера DIV так:

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