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>