টেক্সটে এলিপসিস কীভাবে প্রভাব ফেলবে

Question

আমার অ্যাপ্লিকেশনটিতে আমার একটি দীর্ঘ পাঠ্য রয়েছে এবং আমার এটি কেটে ফেলতে হবে এবং শেষে তিনটি বিন্দু যুক্ত করতে হবে।

নেটিভ টেক্সট উপাদানটির প্রতিক্রিয়াটিকে আমি কীভাবে এটি করতে পারি?

ধন্যবাদ

Comments

আপনাকে সঠিক উত্তর দেওয়া হয়েছে। আপনি এটি গ্রহণ করা উচিত?

— মোস পামার

Answer 1

নাম্বার অফলাইন ব্যবহার করুন

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

অথবা আপনি যদি জানেন / বা সারি প্রতি সর্বাধিক অক্ষর গণনা গণনা করতে পারেন, জেএস সাবস্ট্রিং ব্যবহার করা যেতে পারে।

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

Comments

এটি কোনও সমাধান নয়। পাঠ্যটি পরিবর্তনশীল প্রস্থের।

— মার্ক 14

যতক্ষণ না পাঠ্য উপাদানটির ধারকটির একটি ফ্লেক্স মান রয়েছে (আমি ব্যবহার করি, 1), পাঠ্যটি ধারকটির মধ্যেই কেটে যাবে। সুতরাং @ রাহুল চৌধুরী এর উত্তর এটি করার উপায়।

— পালিত সময়

সংখ্যা অফলাইনস = {1}

— মায়া

প্রদত্ত লিঙ্কটি ভাঙ্গা হয়েছে এবং এর সমাধানের জন্য এটির সমর্থনে প্রতিক্রিয়া-স্থানীয়দের ব্যবহার করা উচিত যা অন্য উত্তরে ব্যাখ্যা করা হয়েছে।

— টাইলার

Answer 2

numberOfLinesকোনও Textউপাদানটিতে প্যারামিটার ব্যবহার করুন :

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

উত্পাদন করবে:

long long long…

(ধরে নিচ্ছি আপনার সংক্ষিপ্ত প্রস্থের ধারক রয়েছে।)

---

ellipsizeModeএলিপিসিসটি heador এ সরানোর জন্য প্যারামিটারটি ব্যবহার করুন middle। tailডিফল্ট মান।

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

উত্পাদন করবে:

…long long text

---

উল্লেখ্য:Text উপাদান এছাড়াও অন্তর্ভুক্ত করা উচিত style={{ flex: 1 }}যখন ঊহ্য শব্দ তার ধারক আকার প্রয়োগ আপেক্ষিক হতে হবে। সারি বিন্যাস ইত্যাদির জন্য দরকারী

Comments

সম্ভবত সুস্পষ্ট নাও হতে পারে, পাশাপাশি পাঠ্যের প্রস্থও নির্দিষ্ট করতে হবে।

— স্টেন মুচো

মজাদার প্রশ্নটি: আপনি লাইনের সংখ্যা কীভাবে গণনা করবেন? কারণ আমি অনুমান করি যে এটিকে আগে কখনও কেউ জানে না (যেহেতু এটি স্থির হওয়ার কোনও কারণ নেই)।

— সিগ্লেসেট

উত্তম উত্তর, তবে CSS উপবৃত্তের মতো একই আচরণ করতে চাইলে উপবৃত্তাকার মোড = 'লেজ' ব্যবহার করা দরকার ।

— অ্যান্ড্রে প্যাটসাইকো

@ র্যানফিট আপনার এই উত্তরটিকে সঠিক হিসাবে চিহ্নিত করা উচিত, এটি অন্যকে সাহায্য করবে, ধন্যবাদ!

— বালথাজার

@ গৌতম, আপনি যে নিকটতমটি পাবেন তা হ'ল উপবৃত্তাকার মোড মাঝখানে সেট করুন think

— হেনরিক হানসেন

Answer 3

আপনি উপবৃত্তাকার মোড এবং নম্বর অফলাইন ব্যবহার করতে পারেন। যেমন

<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

যতক্ষণ না পাঠ্য উপাদানটির ধারকটির একটি ফ্লেক্স মান রয়েছে (আমি ব্যবহার করি, 1), পাঠ্যটি ধারকটির মধ্যেই কেটে যাবে।

— পালিত সময়

উপবৃত্তাকার মোডের জন্য 'লেজ' ডিফল্ট মান হওয়ায় ellipsizeMode = 'লেজ' দরকার হয় না। আপনি পাঠ্যের শুরুতে উপবৃত্তটি দেখাতে না চাইলে আপনি কেবল নাম্বার অফলাইন প্রপ ব্যবহার করতে পারেন এবং এটি কাজ করা উচিত।

— করণ ভুটওয়ালা

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

রিয়েটিভ নেটিভ সম্পর্কে প্রশ্নটি আরও রয়েছে যেখানে পাঠ্য ওভারফ্লো কোনও বৈধ প্রাপ নয়

— ব্রায়ান