एक HTML इनपुट फ़ील्ड में टेक्स्ट-ओवरफ़्लो इलिप्सिस का उपयोग कैसे करें?

Question

मेरे वेब पेज इनपुट फ़ील्ड है जो करने के लिए मैं निम्नलिखित सीएसएस आवेदन किया है:

.ellip { 
    white-space: nowrap; 
    width: 200px; 
    overflow: hidden; 
    -o-text-overflow: ellipsis; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
} 

लेकिन यह कोई असर दिखाई नहीं देता। क्या मुझे यहां कुछ स्पष्ट याद आ रहा है या क्या केवल सीएसएस का उपयोग करके इनपुट फ़ील्ड में इलिप्सिस होना संभव नहीं है?

Answer 1

एक फ़ील्ड अपने नियमों के साथ एक तत्व है। इनपुट फ़ील्ड इस तरह कार्यान्वित किया जाता है कि यदि पाठ फ़ील्ड से अधिक लंबा हो जाता है, तो पाठ केवल अदृश्य हो जाता है।

इसका कारण यह है कि यदि आप किसी रूप में फ़ील्ड का उपयोग करते हैं और टेक्स्ट-ओवरफ्लो इलिप्सिस का उपयोग करना संभव होगा, तो यह केवल छिद्रित सामग्री को प्रेषित करेगा, वांछित प्रभाव नहीं है।

Answer 2

मेरे परीक्षण से क्रोम, सफारी और फ़ायरफ़ॉक्स अब इसका समर्थन करते हैं।

हालांकि उनके पास थोड़ा अलग प्रभाव पड़ता है।

ब्लर फ़ायरफ़ॉक्स पर ... पाठ के दाईं ओर ... लेकिन टेक्स्ट बॉक्स के दाईं ओर छिपा हुआ कोई पाठ है।

धुंध पर क्रोम टेक्स्ट की शुरुआत में कूदता प्रतीत होता है और अंत में, पाठ के स्क्रॉल स्थिति को छोड़कर, अंत में संलग्न करता है।

Answer 3

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मुझे एक ही समस्या हो रही थी और this blog post from Front End Tricks And Magic पर आया जो मेरे लिए काम करता था, इसलिए मैंने सोचा कि अगर लोग अभी भी उत्सुक हैं तो मैं साझा करूंगा। ब्लॉग का सारांश यह है कि आप IE में इनपुट में एक इलिप्सिस कर सकते हैं, हालांकि केवल तभी इनपुट में एक रीडोनली विशेषता है।

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

HTML:

<div class="long-value-input-container"> 
    <input type="text" 
    value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long- 
    value-input" readonly /> 
</div> 

सीएसएस:

.long-value-input { 
    width: 200px; 
    height: 30px; 
    padding: 0 10px; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    overflow: hidden; 
} 

जावास्क्रिप्ट (jQuery का उपयोग कर)

// making the input editable 
$('.long-value-input').on('click', function() { 
    $(this).prop('readonly', ''); 
    $(this).focus(); 
}) 

// making the input readonly 
$('.long-value-input').on('blur', function() { 
    $(this).prop('readonly', 'readonly'); 
}); 

Answer 4

इनपुट ही मेरे लिए चाल किया था पर text-overflow:ellipsis स्थापना। जब इनपुट फोकस से बाहर होता है तो यह इलिप्सिस को छोटा करता है और रखता है।