请帮助解决此问题。目前我有一个div,它是可拖动的,里面的文本是可编辑的。在这里,用户可以使用输入类型范围来更改文本大小。
是否可以隐藏文本画布的字母,以便超出图像画布div边界的字母到达col-sm-8
在这里,当用户输入没有空格的文本时,该单词就会超出col-sm-8
的范围。如何解决这个问题?我使用overflow:hidden
和word-wrap:breakdown
,但它不工作。
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
z-index: 1;
position: absolute;
}
.imageupload {
z-index: -1;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-4">
<div name="anotherdiv">
<input type="range" min="12" max="54" id="fontsize">
</div>
</div>
<div class="col-sm-8">
<div class="parent-canvas">
<div class="text-canvas" id="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="img.png">
</div>
</div>
</div>
</div>
然后我使用了.text-canvas{ word-break: break-all; }
。现在,文本不会移出col-sm-8
,但它仍然会移出image-div。
更新:目前我使用
padding-right:10%
解决了这个问题。但我不认为这是一个好方法。请建议正确的方法。
发布于 2016-10-29 00:05:21
解决方案:
您需要在.parent-canvas
类中使用以下属性:
.parent-canvas {
display: inline-block; /* Display inline but retain the block-level characteristics */
overflow: hidden; /* Hide the text if it overflows the container */
position: relative; /* Text is removed from the normal flow with absolute position, use this to contain it */
}
在此之后,您有两个选项,在.text-canvas
类中使用或:
.text-canvas {
word-break: break-all;
}
代码片段:
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
z-index: 1;
position: absolute;
}
.imageupload {
z-index: -1;
}
.parent-canvas {
display: inline-block;
overflow: hidden;
position: relative;
}
.text-canvas {
word-break: break-all;
}
.image-canvas img {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-4">
<div name="anotherdiv">
<input type="range" min="12" max="54" id="fontsize">
</div>
</div>
<div class="col-sm-8">
<div class="parent-canvas">
<div class="text-canvas" id="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="http://placehold.it/100x100">
</div>
</div>
</div>
</div>
或
.text-canvas {
max-width: 100%;
}
代码片段:
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
z-index: 1;
position: absolute;
}
.imageupload {
z-index: -1;
}
.parent-canvas {
display: inline-block;
overflow: hidden;
position: relative;
}
.text-canvas {
max-width: 100%;
}
.image-canvas img {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-4">
<div name="anotherdiv">
<input type="range" min="12" max="54" id="fontsize">
</div>
</div>
<div class="col-sm-8">
<div class="parent-canvas">
<div class="text-canvas" id="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="http://placehold.it/100x100">
</div>
</div>
</div>
</div>
如果您愿意,也可以同时使用这两种方法,因为它们不会相互干扰:
.text-canvas {
word-break: break-all;
max-width: 100%;
}
代码片段:
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
z-index: 1;
position: absolute;
}
.imageupload {
z-index: -1;
}
.parent-canvas {
display: inline-block;
overflow: hidden;
position: relative;
}
.text-canvas {
word-break: break-all;
max-width: 100%;
}
.image-canvas img {
vertical-align: middle;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-4">
<div name="anotherdiv">
<input type="range" min="12" max="54" id="fontsize">
</div>
</div>
<div class="col-sm-8">
<div class="parent-canvas">
<div class="text-canvas" id="text-canvas" contenteditable="true">
ttttttttttttttttttttttttttttttttttttttt
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="http://placehold.it/100x100">
</div>
</div>
</div>
</div>
测试:
Windows 10 (64位):
IOS 10.1:
可能的UX改进:
在我看来,用户体验的一点改进,至少对于Chrome和FF来说,可以添加cursor: grab;
和cursor: grabbing;
属性,让用户知道它是一个可拖动的元素。
在我贴出这个答案后,我不知道这是一个可拖拽的项目。我想我没有真正注意到整个问题...人们倾向于快速地与事物互动。
您需要决定cursor: text;
是否比grab
和grabbing
更好。
添加到jQuery可拖动类的属性:
.ui-draggable {
cursor: -webkit-grab;
cursor: grab;
}
.ui-draggable-dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
代码片段:
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
z-index: 1;
position: absolute;
}
.imageupload {
z-index: -1;
}
.parent-canvas {
display: inline-block;
overflow: hidden;
position: relative;
}
.text-canvas {
word-break: break-all;
max-width: 100%;
}
.image-canvas img {
vertical-align: middle;
}
.ui-draggable {
cursor: -webkit-grab;
cursor: grab;
}
.ui-draggable-dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-4">
<div name="anotherdiv">
<input type="range" min="12" max="54" id="fontsize">
</div>
</div>
<div class="col-sm-8">
<div class="parent-canvas">
<div class="text-canvas" id="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="http://placehold.it/100x100">
</div>
</div>
</div>
</div>
备注:
要删除vertical-align: middle;
.元素下不需要的空格,请使用属性
编辑:
若要防止在增加font-size
时文本垂直溢出,需要将height: auto;
设置为.text-canvas
类。
你可以用不同的方式做到这一点,你可以这样做:
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css({
'font-size': v + 'px',
'height': 'auto'
});
});
这将设置auto
值覆盖由jQuery UI设置的值。
在演示中,图像非常小,字体大小可能会变得太大,使其容器尺寸超过其父容器的尺寸,请确保在生产中控制这一点。
代码片段:
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css({
'font-size': v + 'px',
'height': 'auto'
});
});
.text-canvas {
z-index: 1;
position: absolute;
}
.imageupload {
z-index: -1;
}
.parent-canvas {
display: inline-block;
overflow: hidden;
position: relative;
}
.text-canvas {
word-break: break-all;
max-width: 100%;
}
.image-canvas img {
vertical-align: middle;
}
.ui-draggable {
cursor: -webkit-grab;
cursor: grab;
}
.ui-draggable-dragging {
cursor: -webkit-grabbing;
cursor: grabbing;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-4">
<div name="anotherdiv">
<input type="range" min="12" max="54" id="fontsize">
</div>
</div>
<div class="col-sm-8">
<div class="parent-canvas">
<div class="text-canvas" id="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="http://placehold.it/100x100">
</div>
</div>
</div>
</div>
发布于 2016-10-25 03:44:53
将.parent-canvas
的尺寸设置为与图像相同,然后使用overflow: hidden
和position-relative
来包含绝对定位的文本。
.parent-canvas {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css('font-size', v + 'px');
});
.parent-canvas {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.text-canvas {
z-index: 1;
position: absolute;
}
.imageupload {
z-index: -1;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-4">
<div name="anotherdiv">
<input type="range" min="12" max="54" id="fontsize">
</div>
</div>
<div class="col-sm-8">
<div class="parent-canvas">
<div class="text-canvas" id="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="http://placehold.it/300x200">
</div>
</div>
</div>
</div>
发布于 2016-10-20 22:12:30
您需要https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
word-break: break-all;
function submit_button() {
/* ....Image upload function.. */
}
$(".text-canvas").draggable({
containment: ".imageupload",
create: function() {
$("#text-canvas ").css("width ", 'auto');
},
drag: function() {
$("#text-canvas ").css("width ", 'auto');
},
start: function() {
$("#text-canvas ").css("width ", 'auto');
},
stop: function() {
$("#text-canvas ").css("width ", 'auto');
}
});
$("#fontsize").on("change", function() {
var v = $(this).val();
$('.text-canvas').css('font-size', v + 'px');
});
.text-canvas {
z-index: 1;
position: absolute;
word-break: break-all;
}
.imageupload {
z-index: -1;
}
.parent-canvas {
position: relative;
}
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="col-sm-4">
<div name="anotherdiv">
<input type="range" min="12" max="54" id="fontsize">
</div>
</div>
<div class="col-sm-8">
<div class="parent-canvas">
<div class="text-canvas" id="text-canvas" contenteditable="true">
my text
</div>
<div class="image-canvas">
<div class="imageupload" onclick="submit_button()">
<img src="img.png">
</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/40149208
复制相似问题