Question

我需要将内容可编辑div的大小设置为与其中的文本相同

。请看这个js小提琴https://jsfiddle.net/felixtm/jaboLc3u/7/

      $(".new-div").css("width",'auto');
                                     } ,
                                     stop: function() { 
                                    $(".new-div").css("width",'auto');
                                     }
                                  });
         $(document).on("click",".closeButton",function(){

                                    $(this).closest('div').remove();
                                 });

         $(".new-div").on("click", function(){

                    var uscontent= $(".new-div").text();

                    if(uscontent.trim()==="message"){
                    $(".new-div").text('');

                      } });  

       $("#font-size").on("change",function(){
                     var v=$(this).val();
                      $('.new-div').css('font-size', v + 'px');
                     });
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
    $('.new-div').height($('.resizeButton').position().top + 17);
    $('.new-div').width($('.resizeButton').position().left + 17);
  $('.new-div').width($('.resizeButton').position().left + 17);

    $('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});


}
})                     

.new-div { 
    z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 0px; right: 0px; top: 15px; border:2px solid black;}
.parent-div {  
    max-width: 236px; width: 236px; position: relative; overflow: hidden; }

.closeButton
{
    display:block;
    position:absolute;
    top:-10px;
    left:-10px;
    width:27px;
    height:27px;
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
    display:block;
    position:absolute;
    bottom:-10px;
    right:-10px;
    width:27px;
    height:27px;
    background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
    background-size: contain;
    cursor: resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="container">
 <div class="row">
 <div class="col-sm-12">
   Font-size:<input type="range" min="12" max="120" id="font-size" />
  </div>
  <br>
  <div class="col-sm-12">
     <div class="parent-div">
     <div class="new-div" contenteditable="true">
     message
    <a class="closeButton"><label  hidden>.</label></a>
  <a class="resizeButton"><label  hidden>x</label></a>
     </div>
        <div class="bord" style="z-index: -1;">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">

        </div>

     </div>
 </div>

这里首先加载内容可编辑div和文本内容的大小是正确的。但是当我尝试调整div的大小时，文本和div的边界之间会出现间隙。

http://www.awesomescreenshot.com/image/1753533/329cefb018f213ecd9243f4cab9ab68a

有些时候这个问题也来了http://www.awesomescreenshot.com/image/1753603/d27436262d454bee88bf53ebfab2049a

我尝试了display:inline-block;，但它无效。

如何解决这个问题？

Answer 1

你的意思是填充可调整大小的div？ https://jsfiddle.net/bimbonkens/2mpjkxad/

padding: 0;

Answer 2

这将解决您的字体大小问题，这比看起来更棘手。

此库的荣誉：http://thdoan.github.io/scalem/

  

$( '.new-div').draggable({
                                    containment: "#bord",
                                     create: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                    drag: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                    start: function() { 
                                    $(".new-div").css("width",'auto');
                                     } ,
                                     stop: function() { 
                                    $(".new-div").css("width",'auto');
                                     }
                                  });
         $(document).on("click",".closeButton",function(){

                                    $(this).closest('div').remove();
                                 });
                                 
        
                      
       $("#font-size").on("change",function(){
                     var v=$(this).val();
                               $('.new-div span').css('font-size', v + 'px');
                     });
$('.resizeButton').draggable({
containment: '#bord',
drag: function() {
	$('.new-div').height($('.resizeButton').position().top + 17);
	$('.new-div').width($('.resizeButton').position().left + 17);
  $('.new-div').width($('.resizeButton').position().left + 17);
   $('.new-div span').scalem();
	//$('.new-div').css({ 'font-size': ($('.new-div').height() / 2.3)});

  
}
});

.new-div { 
    z-index: 1; position: absolute; width: auto; word-break: break-all; text-align: center; left: 30%;top: 15px; border:2px solid black;}
.parent-div {  
    max-width: 236px; width: 236px; position: relative; overflow: hidden; }

.closeButton
{
    display:block;
    position:absolute;
    top:-10px;
    left:-10px;
    width:27px;
    height:27px;
    background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton
{
    display:block;
    position:absolute;
    bottom:-10px;
    right:-10px;
    width:27px;
    height:27px;
    background:url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
    background-size: contain;
    cursor: resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://thdoan.github.io/scalem/javascripts/jquery.scalem.js"></script>


<div class="col-sm-12">
     <div class="parent-div">
     <div class="new-div" contenteditable="true" >
       <span data-scale-ratio="1" data-scale-reference=".new-div">
     message
         </span>
     <a class="closeButton"></a>
     <a class="resizeButton"></a>
     </div>
        <div class="bord" style="z-index: -1;">
            <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
            
        </div>
        
     </div>
 </div>

根据此内的文本设置大小内容可编辑div

2 个答案: