Word-wrap: break-down не работает. Проблема переполнения текста в перетаскиваемом элементе
Пожалуйста, помогите решить эту проблему. В настоящее время у меня есть div, который можно перетаскивать, а текст внутри редактируется. И здесь пользователь может изменить размер текста, используя диапазон входного типа.
Можно ли скрыть буквы текстового холста, так что буквы, выходящие за границу изображения-canvas 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>
Ответы
Ответ 1
Решение:
Вам нужно использовать следующие свойства в классе .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 */
}
После этого у вас есть два варианта, используя word-break или max-width в классе .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>
Ответ 2
Задайте размеры .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>
Ответ 3
Вам нужно 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>
Ответ 4
используйте text-overflow: ellipsis; или text-overflow: clip;, он скроет текст переполнения.
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;
text-overflow: clip;/*ellipsis,initial*/
white-space: nowrap;
overflow: hidden;
width:3em;/*image div width*/
}
.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>
Ответ 5
Для родителя
.parent-canvas{
display: inline-block;
overflow: hidden;
position: relative;
}
Для ребенка (текст-холст)
.text-canvas {
word-break: break-all;
}
Demo
-дополнительный цвет фона для лучших демонстрационных целей
- Изменение размера шрифта в среднем размере
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("input 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;
}
.col-sm-6 {
background: red;
}
.c {padding: 5px;}
.parent-canvas{
background: orange;
display: inline-block;
overflow: hidden;
position: relative;
}
.text-canvas {
background: yellow;
min-width: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<div class="c col-sm-2">
<div name="anotherdiv" style="display:flex">
<div>8px</div>
<input type="range" min="8" max="30" id="fontsize">
<div>30px</div>
</div>
</div>
<div class="c col-sm-12"></div>
<div class="c col-sm-6">
<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://lorempixel.com/150/150/">
</div>
</div>
</div>
</div>
