2013-07-13 9 views
5

मैं टूलटिप लाइब्रेरी में काम कर रहा हूं। विचार सरल है: किसी भी HTML तत्व में जोड़े कस्टम डेटा का श्रेय (मेरा मतलब है data-) संदेश उपयोगकर्ता टूलटिप में दिखाने के लिए, उदाहरण के लिए चाहता है के साथ:रिक्त स्थान होने पर "शब्द-कट" को कैसे हल करें?

<div data-msg="Message">Hover me.</div> 

उपयोगकर्ता माउस होवर करते हैं तत्व पर, टूलटिप ने इसे दिखाया है।

यहां एक Fiddle है।

यदि आप उपर्युक्त उदाहरण में देखते हैं, तो आप देखेंगे कि जब उपयोगकर्ता रिक्त स्थान के साथ संदेश जोड़ता है तो ब्राउज़र रिक्त स्थान में शब्दों को काटता है, लेकिन जब उपयोगकर्ता रिक्त स्थान के बिना संदेश जोड़ता है, तो ब्राउजर कट नहीं होता शब्द (क्योंकि कोई रिक्त स्थान नहीं है)।

मैं white-space, break-word और text-overflow के साथ समस्या को ठीक करने का प्रयास कर रहा हूं, लेकिन वे इसे हल नहीं करते हैं।

यह बहुत महत्वपूर्ण है: मैं विशिष्ट width नहीं रखना चाहता, यह छोड़ने के लिए कि ब्राउजर स्वचालित रूप से तत्व की चौड़ाई की गणना करता है। मैं इस समस्या को एक विशिष्ट width जोड़कर ठीक कर सकता हूं लेकिन मुझे वह नहीं चाहिए।

यदि कोई जानता है कि इस समस्या को कैसे ठीक किया जाए, तो मैं मुझे इस मुद्दे का व्यवहार समझाऊंगा।

धन्यवाद, लियो!

उत्तर

4

मुझे यह काम करता है के लिए में [data-msg]::before {}

डेमोhttp://jsfiddle.net/QHD3A/

+0

आप झूमने

white-space: nowrap; 

जोड़कर! मैंने 'व्हाइट-स्पेस' प्रॉपर्टी की कोशिश की लेकिन इन मानों के साथ: * प्री-रैप * और * प्री-लाइन *। * अब्रैप * मूल्य मेरे लिए नहीं है। मैंने सोचा कि इस संपत्ति को 'वर्ड-रैप: ब्रेक-वर्ड' के साथ मिलकर अजीब व्यवहार होंगे। आपका बहुत बहुत धन्यवाद! – leoMestizo

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