HTML/CSS कैसे गूगल क्रोम में पेज की पूरी चौड़ाई में फैले से प्रकाश डाला पाठ को रोकने के लिए

Question

असल में जब मैं कुछ वेबसाइटों पर गूगल क्रोम और आकर्षण पाठ का उपयोग, मुख्य आकर्षण ब्राउज़र की पूरी चौड़ाई केवल पाठ पर प्रकाश डाला से spans बल्कि। कैसे सीएसएस इसे बनाने के लिए समायोजित किया जा सकता इसलिए जब आप लेख को हाइलाइट करें, यह केवल शब्द नहीं बल्कि पूरे पृष्ठ भर में अवधि की तुलना में डाला गया है कि रूप में अच्छी तरह। http://guides.rubyonrails.org/getting_started.html पर देखने के लिए एक अच्छा उदाहरण है। Google क्रोम में गैर-कोड टेक्स्ट को हाइलाइट करने का प्रयास करें और आप देख सकते हैं कि मैं किस बारे में बात कर रहा हूं।

Answer 1

मेरे ओसीडी हिस्सा इस रूप में अच्छी तरह सोच है के साथ किसी भी पाठ चयन को रोकने है: केवल एक चीज मैंने देखा है (हालांकि यह कोई एक व्यापक समाधान भी तरह से है) कि जारी है तत्व आपके द्वारा किए गए व्यवहार को प्रदर्शित करते हैं। This Fiddle एक लाइव संस्करण (नीचे स्क्रीनशॉट) को बचाने कि एक घोषणा float: left; है, जो पूरे पेज में फैले से पाठ हाइलाइटिंग रोकता है जिससे दो divs समान हैं दर्शाता है।

यदि यह आपके लिए एक बड़ा मुद्दा है (हालांकि मैं अन्यथा कहूंगा), तो आप यह सुनिश्चित करने के लिए अपने मुख्य कंटेनर को फ़्लोट कर सकते हैं कि टेक्स्ट हाइलाइटिंग इसे बाधित कर रही है। @ सॉलेंडिल का "समाधान" एक मामूली दृश्य परेशानियों के लिए एक बड़ी उपयोगिता दोष (पाठ का चयन करने में सक्षम नहीं होने के लिए परेशान) पेश करता है।

अद्यतन: @ AndreZS के जवाब के अनुसार, एक position डिफ़ॉल्ट static ऐसे लेख का भी तत्व (मुझे लगता है कि इस व्यवहार मेरी मूल जवाब के बाद से वर्षों में बदल गया है करने के लिए प्रकाश डाला प्रतिबंधित करता है के अलावा अन्य मूल्य जोड़ने)। यह कोई है वेबकिट से परिचित व्याख्या करने के लिए वास्तव में क्या वांछित व्यवहार को गति प्रदान करने पर जा रहा है ले जाएगा: एक तत्व के लेआउट और यह कैसे तैयार किया जा रहा है के साथ कुछ की तरह लगता है।

Answer 2

आप हाइलाइटिंग एल्गोरिथ्म के machanism बदल नहीं सकते। हाइलाइट पैडिंग और मार्जिन के माध्यम से फैलता है, जो कभी-कभी परेशान होता है। क्या तुम कर सकते हो सीएसएस

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none; 

Answer 3

div अनुभाग है कि अपने पाठ में शामिल होंगे में अपने .css फ़ाइल उपयोग position: relative; में

।

Answer 4

.content{ 
    display:inline-block; 
} 

http://jsfiddle.net/V7ahp/4/

CherryFlavourPez द्वारा समाधान, नाव का उपयोग कर, आगे जटिलता के लिए नेतृत्व की तरह कंटेनर नाव div के अंदर के अनुसार खिंचाव नहीं होगा होगा।