Safari: Text in contenteditable div with no spaces does not wrap around image upon focus

Question

I have a div on the left half of (say) a dialog, and an image on the right half. The div and the image start at the same point vertically, but the text is much longer than the image. I would like to for the text to be on the left side of the image, and once the image ends (vertically), I would like the text to occupy the complete width. Everything seems to work as expected as long as the text has spaces.

On Safari, once I click to edit the text and if the text has no spaces, the text jumps below the image as opposed to remaining to the left of the image. On Chrome things work as expected regardless of whether the text has spaces.

Is there any workaround to get the text to be on the left of the image when editing on Safari?

Simple JSFiddle https://jsfiddle.net/adeopura/jpu0yckL/. Expected behavior can be seen on Chrome (Version 62.0.3202.94) and the unexpected behavior can be seen on Safari (version 11.0.1). MAC OS version is 10.13.1. I would prefer if I do not have to modify the HTML structure and have a CSS only solution, but I am open to ideas.

HTML is:

<div class="image-desc-container">
<div class="image-container">
   <img width="120" class="image" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
</div>

<div class="textarea-container">
  <div contenteditable="true" class="my-input">Loremipsumdolorsitametconsetetursadipscingelitrseddiam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
</div>

CSS is:

.image-desc-container{
  width: 250px; 
  min-height: 150px; 
  position: relative; 
  border: 1px solid #ccc; 
  background: #f7f7f7; 
  padding: 10px; 
  word-wrap: break-word; 
  display: block;
}

.image-container{
  float: right;
  margin-left: 16px;
  position: relative;
  z-index: 1;
}

.image {
  width: 120px;
  height: 120px;
}

.textarea-container {
  position: relative;
  display: block;
}

.my-input {
  min-height: auto;
  word-break: break-all;
  display: block;
  user-select: text;
  -webkit-user-select: text;
  overflow: initial;
  white-space: pre-line;
  -webkit-nbsp-mode: normal;
  line-break: auto;
}

Answer 1

white-space: pre is working as expected on Safari but not on Chrome. You can declare two separate classes for Safari and Chrome and adjust them accordingly using Javascript.

Check out the updated fiddle. DEMO

I am using this snippet to check if the browser is Safari.

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

document.getElementById("input").style.whiteSpace = isSafari ? "pre" : "pre-line";

.image-desc-container{
  width: 250px; 
  min-height: 150px; 
  position: relative; 
  border: 1px solid #ccc; 
  background: #f7f7f7; 
  padding: 10px; 
  word-wrap: break-word; 
  display: block;
}

.image-container{
  float: right;
  margin-left: 16px;
  position: relative;
  z-index: 1;
}

.image {
  width: 120px;
  height: 120px;
}

.textarea-container {
  position: relative;
  display: block;
}

.my-input {
  min-height: auto;
  word-break: break-all;
  display: block;
  user-select: text;
  -webkit-user-select: text;
  overflow: initial;
  -webkit-nbsp-mode: normal;
  line-break: auto;
}

<div class="image-desc-container">
    <div class="image-container">
       <img width="120" class="image" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
    </div>

    <div class="textarea-container">
      <div contenteditable="true" id="input" class="my-input">Loremipsumdolorsitametconsetetursadipscingelitrseddiam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
    </div>
    
</div>

Answer 2

I have updated your css added wrap-word property in #box class

#box { width: 250px; min-height: 150px; position: relative; border: 1px solid #ccc; background: #f7f7f7; padding: 10px;word-wrap:break-word }

#box img { float: right; }