Android स्टॉक ब्राउज़र में रीडोनली इनपुट फ़ील्ड पर इलिप्सिस कैसे दिखाएं?

Question

यदि टेक्स्ट बहुत लंबा है तो आप इलिप्सिस दिखाने के लिए इनपुट फ़ील्ड कैसे सेट करते हैं? इनपुट फ़ील्ड केवल पढ़ा जाता है और इसकी चौड़ाई 100% पर सेट होती है।

क्या यह संभव है? यदि नहीं, तो आप इसे जावास्क्रिप्ट में कैसे करते हैं?

नोट: हालांकि यह क्रोम पर काम करता प्रतीत होता है, यह एंड्रॉइड स्टॉक ब्राउज़र पर काम नहीं करता है।

इनपुट क्षेत्र के लिए मेरे वर्तमान सीएसएस:

white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 

धन्यवाद!

Answer 1

मुझे लगता है कि इस answer आप

में मदद मिलेगी

आप एक वर्ग बना सकते हैं और

<input type="text" readonly value="Lorem ispum dolor sit amit Lorem ispum dolor sit amit Lorem ispum dolor sit amit Lorem ispum dolor sit amit " class="ellipsis"> 

सीएसएस अपने textbox
एचटीएमएल पर लागू कर सकते हैं

.ellipsis { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
} 

Ben के अनुसार एंड्रॉयड सीएसएस पाठ-अतिप्रवाह समस्याओं को ठीक करने

*{ 
    text-rendering: optimizeLegibility; 
} 

इसे यहाँ http://jsfiddle.net/b4YjX/

Answer 2

रहते हैं अपनी आवश्यकताओं पर निर्भर करता है की जाँच करें, आप इस लक्ष्य को हासिल करने के लिए सीएसएस के text-overflow उपयोग कर सकते हैं:

HTML:

<input disabled="disabled" value="really really long text that will be trunked" /> 

सीएसएस

input{ 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; 
    width: 100px; 
} 

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

Answer 3

निम्नलिखित कोड परीक्षण किया गया है और यह काम करता है, मुझे आशा है कि मदद मिलेगी!

.input{ 
overflow:hidden; 
text-overflow:ellipsis; 
width:100%; 
} 

Answer 4

यह Android ब्राउज़र में एक सीमा/बग प्रतीत होता है: यह किसी भी input तत्व पर text-overflow: ellipsis को लागू करने में विफल रहा है।

उदाहरण के लिए, के बजाय <input name=foo value="some long string here" width=100%>, आप एक केवल पढ़ने के लिए क्षेत्र के लिए

<style> 
.hidden { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
} 
</style> 
<div class=hidden>some long string here</div> 
<input type=hidden name=foo value="some long string here"> 

इस्तेमाल कर सकते हैं, तो इसे आसानी समाधान नहीं है: पहले में (जैसे) div तत्व, आप text-overflow: ellipsis सेट जिस पर डेटा डुप्लिकेट,, और फिर एक छिपे हुए क्षेत्र में। आप रीडोनली फ़ील्ड की तरह दिखने वाले पहले तत्व को स्टाइल करना चाहते हैं, लेकिन इसे सामान्य टेक्स्ट के रूप में रखते हुए यह उपयोगकर्ता को यह स्पष्ट कर देगा कि इस डेटा को सामान्य माध्यमों से संपादित नहीं किया जा सकता है।

सामान्य उपकरणों के साथ सामान्य रूप से, 100% को वास्तविक डिवाइस चौड़ाई के अनुरूप बनाने के लिए आपको आमतौर पर <meta name="viewport" content="width=device-width,initial-scale=1"> जैसे कुछ की आवश्यकता होती है।