Safari: Tekst w contenteditable div bez spacji nie obejmuje obrazu po ustawieniu ostrości

Question

Mam div po lewej stronie (powiedzmy) okna dialogowego i obraz po prawej stronie. Element div i obraz rozpoczynają się w tym samym punkcie w pionie, ale tekst jest znacznie dłuższy niż obraz. Chciałbym, aby tekst znajdował się po lewej stronie obrazu, a gdy obraz się kończy (w pionie), chciałbym, aby tekst zajmował całą szerokość. Wszystko wydaje się działać zgodnie z oczekiwaniami, o ile tekst ma spacje.

Po Safari klikam, aby edytować tekst, a jeśli tekst nie zawiera spacji, tekst przeskakuje pod obrazem, a nie po lewej stronie obrazu. W Chrome rzeczy działają zgodnie z oczekiwaniami, niezależnie od tego, czy tekst zawiera spacje.

Czy istnieje sposób obejścia tego tekstu po lewej stronie obrazu podczas edycji w Safari?

Proste JSFiddle https://jsfiddle.net/adeopura/jpu0yckL/. Oczekiwane zachowanie można zobaczyć w przeglądarce Chrome (wersja 62.0.3202.94), a nieoczekiwane zachowanie można zobaczyć w przeglądarce Safari (wersja 11.0.1). Wersja MAC OS to 10.13.1. Wolałbym, gdybym nie musiał modyfikować struktury HTML i mieć rozwiązania tylko CSS, ale jestem otwarty na pomysły.

HTML jest:

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

.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 działa zgodnie z oczekiwaniami w Safari, ale nie w Chrome. Możesz zadeklarować dwie osobne klasy dla Safari i Chrome i odpowiednio je dostosować przy użyciu Javascript.

Sprawdź zaktualizowane skrzypce. DEMO

Używam tego snippet, aby sprawdzić, czy przeglądarka jest 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 zostały zaktualizowane aĹ dodany Wrap-word css w klasie #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; }