2017-11-21 7 views
6

मेरे पास एक संवाद (बाएं) के बाईं ओर एक div है, और दाईं ओर एक छवि है। 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; 
} 
+0

एक बेहतर फैशन – AshD

उत्तर

2

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>

+0

पर काम करता है। काम करने लगता है, कृपया मुझे थोड़ा और परीक्षण करने दें और मैं जवाब और बकाया को जल्द ही – AshD

+0

चिह्नित कर दूंगा! मैंने कुछ जेएस के साथ जवाब अपडेट किया है यह पता लगाने के लिए कि ब्राउज़र 'सफारी' है या नहीं। कृपया जांचें। –

+0

मैं https://browserstrangeness.bitbucket.io/css_hacks का उपयोग कर रहा हूं।सफारी निर्धारित करने के लिए एचटीएमएल # वेबकिट। मैं जो भी आप प्रस्तावित कर रहा हूं उसका उपयोग कर सकता हूं। – AshD

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; } 
+0

में इस मुद्दे को प्रदर्शित करने के लिए jsfiddle अपडेट किया धन्यवाद। कंटेनर के बाहर जाने वाला पाठ कुछ ऐसा था जो मैंने कोड में संबोधित किया था लेकिन इसे पहेली में डालना भूल गया था। सफारी के बारे में हिस्सा छवि के चारों ओर टेक्स्ट रैप नहीं है, जिसके बारे में मैं चिंतित हूं, जो ऊपर दिए गए सीएसएस को हल नहीं करता है। – AshD

+0

मैंने सफारी 5.1.7 संस्करण में इसका परीक्षण किया है और टेक्स्ट में लपेटा है और मेरे लिए ठीक काम कर रहा है। आप वास्तव में क्या देख रहे हैं? –

+0

मै मैक पर सफारी संस्करण 11.0.1 पर हूं। यदि आप क्रोम पर बेवकूफ खोलते हैं, तो पाठ छवि के बाईं ओर शुरू होता है। सफारी पर, पाठ छवि के नीचे शुरू होता है। मैं सफारी पर व्यवहार करने की कोशिश कर रहा हूं क्रोम पर व्यवहार के समान ही। – AshD

संबंधित मुद्दे