पाठ पर एलिपसिस प्रभाव कैसे पड़ता है

Question

मैं अपने ऐप में एक लंबा पाठ रख रहा हूं और मुझे इसे काटकर अंत में तीन बिंदु जोड़ने की आवश्यकता है।

मैं रिएक्ट नेटिव टेक्स्ट एलिमेंट में कैसे कर सकता हूं?

धन्यवाद

Comments

आपको सही उत्तर दिया गया है। शायद आपको इसे स्वीकार करना चाहिए?

— मॉस पामर

Answer 1

नंबर का उपयोग करें

https://rnplay.org/plays/ImmKkA/edit

या यदि आप जानते हैं या प्रति पंक्ति अधिकतम वर्ण गणना की गणना कर सकते हैं, तो जेएस सबस्ट्रिंग का उपयोग किया जा सकता है।

<Text>{ ((mytextvar).length > maxlimit) ? 
    (((mytextvar).substring(0,maxlimit-3)) + '...') : 
    mytextvar }
</Text>

Comments

वह कोई हल नहीं है। पाठ परिवर्तनशील चौड़ाई है।

— मार्क

जब तक पाठ तत्व के कंटेनर में एक फ्लेक्स मान (I उपयोग, 1) है, तब तक पाठ कंटेनर के भीतर छोटा हो जाएगा। तो @ राहुल चौधरी का जवाब यह करने का तरीका है।

— फोस्टरटाइम

numberOfLines = {1}

— mayaa

प्रदान किया गया लिंक टूट गया है और समाधान प्रतिक्रिया-मूलक के लिए इसके समर्थन में निर्मित होना चाहिए, जिसे अन्य उत्तरों में समझाया गया है।

— टायलर

Answer 2

numberOfLinesएक Textघटक पर पैरामीटर का उपयोग करें :

<Text numberOfLines={1}>long long long long text<Text>

उत्पादन करेंगे:

long long long…

(मान लें कि आपके पास कम चौड़ाई का कंटेनर है।)

---

ellipsizeModeएलिप्स को स्थानांतरित करने के लिए पैरामीटर का उपयोग करें headया middle। tailडिफ़ॉल्ट मान है।

<Text numberOfLines={1} ellipsizeMode='head'>long long long long text<Text>

उत्पादन करेंगे:

…long long text

---

नोट:Text घटक भी शामिल करना चाहिए style={{ flex: 1 }}जब अंडाकार अपने कंटेनर के आकार के लागू रिश्तेदार की जरूरत है। पंक्ति लेआउट आदि के लिए उपयोगी है।

Comments

शायद स्पष्ट हो सकता है, पाठ पर भी चौड़ाई निर्दिष्ट करने की आवश्यकता नहीं है।

— स्टेन मुचो

दिलचस्प सवाल यह है: आप लाइनों की संख्या की गणना कैसे करते हैं? क्योंकि मुझे लगता है कि कोई भी इसे पहले से नहीं जानता है (क्योंकि इसके स्थिर होने का कोई कारण नहीं है)।

— cglacet

अच्छा जवाब है, लेकिन अगर सीएसएस दीर्घवृत्त की तरह ही व्यवहार चाहते हैं, तो ellipsizeMode = 'tail' का उपयोग करने की आवश्यकता है ।

— एंड्री पटसेइको

@RanYefet आपको इस उत्तर को सही मानने पर विचार करना चाहिए, यह दूसरों की मदद करेगा, धन्यवाद!

— बाल्टाजार

@ गौतम आपको जो सबसे पास मिलेगा, वह है ईलिप्सिसमोड सेट जो मुझे लगता है कि मध्य में है।

— हेनरिक हेन्सन

Answer 3

आप ellipsizeMode और numberOfLines का उपयोग कर सकते हैं। जैसे

<Text ellipsizeMode='tail' numberOfLines={2}>
  This very long text should be truncated with dots in the beginning.
</Text>

https://facebook.github.io/react-native/docs/text.html

Comments

जब तक पाठ तत्व के कंटेनर का फ्लेक्स मान (I उपयोग, 1) होता है, तब तक पाठ कंटेनर के भीतर छोटा हो जाएगा।

— फोस्टरटाइम

ellipsizeMode = 'tail' की जरूरत नहीं है क्योंकि ellipsizeMode के लिए 'tail' डिफ़ॉल्ट मान है। जब तक आप पाठ की शुरुआत में दीर्घवृत्त दिखाना नहीं चाहते हैं, तब तक आप सिर्फ नंबरऑफलाइन प्रोप का उपयोग कर सकते हैं और यह काम करना चाहिए।

— करण भुटवाला

Answer 4

<View 
   style={{
        flexDirection: 'row',
        padding: 10,
    }}
>
  <Text numberOfLines={5} style={{flex:1}}>
       This is a very long text that will overflow on a small device This is a very 
       long text that will overflow on a small deviceThis is a very long text that 
       will overflow on a small deviceThis is a very long text that will overflow 
       on a small device
  </Text>
</View>

Answer 5

<Text ellipsizeMode='tail' numberOfLines={2} style={{width:100}}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at cursus 
</Text>

परिणाम: Lorem ipsum...

Answer 6

const styles = theme => ({
 contentClass:{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp:1,
    WebkitBoxOrient:'vertical'
 }   
})

render () {
  return(
    <div className={classes.contentClass}>
      {'content'}
    </div>
  )
}

Comments

यह सवाल रिएक्टिव नेटिव के बारे में अधिक है, जहां टेक्स्टऑवरफ्लो एक वैध प्रस्ताव नहीं है

— ब्रायन गुयेन