Geek Answers Handbook

Safari: text in a contenteditable div without spaces does not wrap around the image when focused

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

In Safari, when I click to edit text, and if the text has no spaces, the text jumps below the image, and does not stay to the left of the image. In Chrome, everything works as expected, regardless of whether the text has spaces.

Is there any workaround for getting text to the left of the image when editing on Safari?

Simple JSFiddle https://jsfiddle.net/adeopura/jpu0yckL/ . Expected behavior can be seen in Chrome (version 62.0.3202.94), and unexpected behavior can be seen in Safari (version 11.0.1). The MAC OS version is 10.13.1. I would prefer if I don't need to change the HTML structure and only have a CSS solution, but I'm open to ideas.

HTML:

<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:

.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;
}
+6
source share
2 answers

white-space: preworks as expected in Safari, but not in Chrome. You can declare two separate classes for Safari and Chrome and configure them accordingly using Javascript.

Check out the updated fiddle. Demo

, , 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>
Hide result
+2

CSS CSS #box

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

#box img { float: right; }
+2

More articles:


All Articles