डीआईवी के अंदर स्पैन टेक्स्ट-ओवरफ्लो को रोकता है: इलिप्सिस

यह प्रश्न किसी भी तरह से सख्त नहीं है, लेकिन यह एक समस्या है जिसका सामना मैंने किया है और यह सोच रहा था कि एसओ विशेषज्ञों में से कुछ कैसे हल करेंगे - अगर कोई समाधान हो।डीआईवी के अंदर स्पैन टेक्स्ट-ओवरफ्लो को रोकता है: इलिप्सिस

मेरे पास एक निश्चित चौड़ाई वाला UI विजेट है जो फ़ाइल जानकारी प्रदर्शित करता है। मैं फ़ाइल नाम को उस पर क्लिक करके संपादित करने की क्षमता प्रदान कर रहा हूं और उस कार्यक्षमता को इंगित करने के लिए मेरे पास फ़ॉन्ट रंग बदलने के लिए :hover शैली लागू है। मूल रूप से मैंने फ़ाइल नाम को DIV के भीतर रखा है, लेकिन चूंकि अलग-अलग फ़ाइल नाम अलग-अलग लंबाई हैं, इसलिए मैं फ़ाइल नाम पर DIV का आकार नहीं लगा सकता और :hover टेक्स्ट को कसकर प्रभाव डाल सकता हूं। छोटे फ़ाइल नामों के साथ :hover प्रभाव तब भी प्रदर्शित होता है जब कर्सर DIV के खाली भाग पर होता है। यह वही नहीं था जो मैं चाहता था कि एक समाधान के रूप में मैंने फ़ाइल नाम को SPAN (:hover प्रभाव के साथ) में रखा। इसने छोटे फ़ाइल नामों के लिए समस्या हल की लेकिन लंबे फाइलनामों को एक अंडाकार के साथ गहराई से बहने से रोका।

आदर्श रूप से मैं एक समाधान चाहता हूं जो दोनों प्रभावों को प्राप्त करता है - एलिप्स लंबे फ़ाइल नाम और वास्तविक पाठ पर होवर करते समय :hover प्रभाव लागू करें। मैं अभी भी सीएसएस के लिए बहुत नया हूं इसलिए शायद मुझे एक स्पष्ट उत्तर याद आ रहा है। धन्यवाद!
(और jsfiddle पर)

संपादित करें::

यहाँ मुद्दों दिखा एक उदाहरण पृष्ठ है मैं सोचा मैं कुछ जावास्क्रिप्ट अधिक लंबे नाम क्लिप करने के लिए जादू प्रदर्शन कर सकता है, लेकिन एक सरल सीएसएस समाधान के लिए उम्मीद की गई थी।

<html> 
<head> 
<style> 
    div { 
     margin:10px; 
     width:200px; 
     max-width:200px; 
     font-size:1.2em; 
     overflow:hidden; 
     text-overflow:ellipsis; 
    } 
    div.a:hover, span:hover { 
     color:666; 
     cursor:pointer; 
    } 
    span { 
     display:inline-block; 
    } 
</style> 
</head> 
<body> 

    <!-- This works well for long filenames --> 
    <div class="a"> 
     ThisIsMyReallyReallyLongFilename.txt 
    </div> 

    <!-- ... but fails for the short names --> 
    <div class="a"> 
     Shortname.txt 
    </div> 

    <!-- This fails to show ellipse for long filenames --> 
    <div> 
     <span>ThisIsMyReallyReallyLongFilename.txt</span> 
    </div> 

    <!-- ... but wraps the text nicely for short names --> 
    <div> 
     <span>Shortname.txt</span> 
    </div> 

</body> 
</html>

स्रोत

2012-04-18 randall

इस तरह? (काल से display:inline-block; को हटाने पर ध्यान दें।)

<html> 
<head> 
<style> 
div { 
    margin:10px; 
    width:200px; 
    max-width:200px; 
    overflow: hidden; 
    text-overflow:ellipsis; 
    font-size: 1.2em; 
} 
span:hover { 
    color:666; 
    cursor:pointer; 
} 
</style> 
</head> 
<body> 

<!-- This now does show ellipse for long filenames --> 
<div> 
    <span>ThisIsMyReallyReallyLongFilename.txt</span> 
</div> 

<!-- ... but wraps the text nicely for short names --> 
<div> 
    <span>Shortname.txt</span> 
</div> 

</body> 
</html>

स्रोत

2012-04-18 21:13:42 Scriptor

ARGH! मुझे पता था कि मैं कुछ गूंगा खो रहा था। मुझे उस 'डिस्प्ले: इनलाइन-ब्लॉक' प्रॉपर्टी की भी आवश्यकता नहीं थी, यह एक अलग डिज़ाइन से बाएं ओवर था जिसे मैंने कभी नहीं हटाया था। (* शर्म में सिर हिलाता है *) इसे इंगित करने के लिए धन्यवाद! :-) और उनके सुझावों के लिए हर किसी के लिए धन्यवाद। – randall

आपका स्वागत है :) – Scriptor

Whew! यह मेरा दिन बचाया! –

मुद्दा वास्तव में display:inline-block के साथ एक SPAN होने से आता है। आपको इसे हटाने या इसे something along the lines of this jsFiddle पर अपडेट करने की आवश्यकता होगी। मैं बिल्कुल स्पष्ट नहीं हूं कि आपके पास उदाहरण के आधार पर इसे बदला जाना चाहिए।

मेरा मानना है कि यह ऐसा हो रहा है क्योंकि SPAN कभी भी इसके माता-पिता DIV को ओवरफ़्लो नहीं करेगा। At least that's how the W3 spec states this gets triggered.

स्रोत

2012-04-18 21:08:12 scottheckel

एक नया नियम है कि div और span दोनों को लक्षित करने के लिए div शासन से overflow और text-overflow गुण ले जाएँ। अधिकतम चौड़ाई जोड़ें।

<html> 
<head> 
<style> 
    div, span { 
     overflow:hidden; 
     text-overflow:ellipsis; 
     max-width:200px; 
    } 
    div { 
     margin:10px; 
     width:200px; 
     font-size:1.2em; 
    } 
    div.a:hover, span:hover { 
     color:#666; 
     cursor:pointer; 
    } 
    span { 
     display:inline-block; 
    } 
</style> 
</head> 
<body> 

    <!-- This works well for long filenames --> 
    <div class="a"> 
     ThisIsMyReallyReallyLongFilename.txt 
    </div> 

    <!-- ... but fails for the short names --> 
    <div class="a"> 
     Shortname.txt 
    </div> 

    <!-- This fails to show ellipse for long filenames --> 
    <div> 
     <span>ThisIsMyReallyReallyLongFilename.txt</span> 
    </div> 

    <!-- ... but wraps the text nicely for short names --> 
    <div> 
     <span>Shortname.txt</span> 
    </div> 

</body> 
</html>

स्रोत

2012-04-18 21:12:10 brentonstrine

Hexxagonal के लिंक jsFiddle ही समाधान मेरा है मूल रूप से है, वह सिर्फ अवधि एक अधिकतम चौड़ाई के बजाय एक 100% चौड़ाई देता है। हालांकि, वही अवधारणा है, यदि स्पैन को 'इनलाइन-ब्लॉक' होने वाला चौड़ाई चाहिए। – brentonstrine

डीआईवी के अंदर स्पैन टेक्स्ट-ओवरफ्लो को रोकता है: इलिप्सिस

उत्तर

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