In a hypothetical dialog layout, there is a div on the left side and an image on the right side. Both the div and the image start at the same vertical point. However, the text in the div is longer than the image. The desired layout is for the text to be displayed next to the image on the left until the image ends vertically, and then for the text to expand to fill the full width. This layout works fine with text that contains spaces.
However, when editing the text without spaces on Safari, the text jumps below the image instead of staying next to it as it does in Chrome. Is there a workaround to maintain the desired layout when editing text without spaces on Safari?
A simple demonstration of the issue can be found in this JSFiddle: https://jsfiddle.net/adeopura/jpu0yckL/. The expected behavior is observed in Chrome (Version 62.0.3202.94), while the unexpected behavior occurs in Safari (Version 11.0.1) on macOS 10.13.1. Ideally, a CSS-only solution without modifying the HTML structure is preferred, but all ideas are welcome.
Below is the HTML code:
<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>
And the corresponding 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;
}