Text Overflow Ellipsis: Avoid Word Break

CSS ellipsis after a word ends

As of 2019, you can't do that with pure CSS. This is for two reasons:

1. You can't target text nodes with pure CSS, so you can't detect with CSS whether there's a space to inject the ellipsis. The CSS property "text-overflow" merely places the ellipsis wherever the overflow will happen, as in your example.
2. You also can't target or detect overflow directly with CSS. There are a number of hacks you can try with JavaScript, but the browser just doesn't expose any direct way to see exactly where an overflow break occurs.

Stop word-wrap dividing words

use white-space: nowrap;. If you have set width on the element on which you are setting this it should work.

update -
rendered data in Firefox

CSS Text word break With overflow

Get rid of white-space: no-wrap from .rpwe-block a and add the following:

.rpwe-title{
  height: 14px;
  display: block;
  overflow: hidden;
}

Word-wrap: break-down not working. Text overflow issue in draggable element

Solution:

You need to use the following properties in your .parent-canvas class:

.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 */
}

After this you have two options, using word-break or max-width in your .text-canvas class:

.text-canvas {
  word-break: break-all;
}

Code Snippet:

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>