सफारी: बिना किसी रिक्त स्थान के संतोषजनक div में टेक्स्ट फोकस पर छवि के चारों ओर लपेटता नहीं है

Question

मेरे पास एक संवाद (बाएं) के बाईं ओर एक div है, और दाईं ओर एक छवि है। Div और छवि लंबवत उसी बिंदु पर शुरू होती है, लेकिन पाठ छवि से काफी लंबा है। मैं पाठ के लिए छवि के बाईं तरफ होना चाहता हूं, और एक बार जब छवि समाप्त हो जाती है (लंबवत), तो मैं पाठ को पूरी चौड़ाई पर कब्जा करना चाहता हूं। जब तक पाठ में रिक्त स्थान होता है तब तक सब कुछ अपेक्षित काम करता है।

सफारी पर, एक बार जब मैं टेक्स्ट संपादित करने के लिए क्लिक करता हूं और यदि टेक्स्ट में कोई रिक्त स्थान नहीं है, तो टेक्स्ट छवि के बाईं ओर शेष के विपरीत छवि के नीचे कूदता है। क्रोम चीजों पर अपेक्षित कार्य करता है चाहे टेक्स्ट में रिक्त स्थान हों या नहीं।

क्या सफारी पर संपादन करते समय छवि के बाईं ओर टेक्स्ट प्राप्त करने के लिए कोई कामकाज है?

सरल JSFiddle https://jsfiddle.net/adeopura/jpu0yckL/। क्रोम (संस्करण 62.0.3202.9 4) पर अपेक्षित व्यवहार देखा जा सकता है और सफारी (संस्करण 11.0.1) पर अप्रत्याशित व्यवहार देखा जा सकता है। मैक ओएस संस्करण 10.13.1 है। मैं पसंद करूंगा कि मुझे HTML संरचना को संशोधित करने की आवश्यकता नहीं है और केवल एक सीएसएस है, लेकिन मैं विचारों के लिए खुला हूं।

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> 

सीएसएस है:

.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सफारी पर अपेक्षित काम कर रहा है लेकिन क्रोम पर नहीं। आप सफारी और क्रोम के लिए दो अलग-अलग कक्षाएं घोषित कर सकते हैं और जावास्क्रिप्ट का उपयोग करके उन्हें समायोजित कर सकते हैं।

अद्यतन पहेली को देखें। 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>

Answer 2

मैं #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; }