我需要将内容可编辑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;
,但它无效。
如何解决这个问题?
答案 0 :(得分:0)
你的意思是填充可调整大小的div? https://jsfiddle.net/bimbonkens/2mpjkxad/
padding: 0;
答案 1 :(得分:0)
这将解决您的字体大小问题,这比看起来更棘手。
此库的荣誉: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>