Як вплинути Еліпсис на текст


140

У моєму додатку довгий текст, і мені потрібно обрізати його і додати три крапки до кінця.

Як я можу це зробити в елементі React Native Text?

Дякую


1
Вам дали ідеальну відповідь. Можливо, ви повинні це прийняти?
Мосс Палмер

Відповіді:


32

використовувати numberOfLines

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

або якщо ви знаєте / або можете обчислити максимальний кількість символів на рядок, може використовуватися підстрока JS.

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

85
Це не рішення. Текст змінної ширини.
Марк

2
Поки контейнер елемента Text має значення Flex (я використовую, 1), текст буде усічений у контейнері. Тож відповідь @Rahul Chaudhari - це спосіб це зробити.
прийом

numberOfLines = {1}
mayaa

1
Надане посилання розривається, і рішення повинно полягати у використанні вбудованого react-native для підтримки цього, що пояснюється в інших відповідях.
Тайлер

406

Використовуйте 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 }}коли еліпсис потрібно застосовувати щодо розміру його контейнера. Корисно для макетів рядків тощо.


19
Можливо, очевидно, може, ні, потрібно також вказати ширину в тексті.
Стен Мухов

Цікаве питання: як обчислити кількість рядків? Бо я здогадуюсь, про це ніхто ніколи не знає заздалегідь (оскільки не має підстав бути статичним).
cglacet

1
Хороша відповідь, але якщо ви хочете таку саму поведінку, як і css ellipses , потрібно використовувати ellipsizeMode = 'tail' .
Андрій Пацейко

@RanYefet ви повинні розглянути позначення цієї відповіді правильною, це допоможе іншим, дякую!
Бальтазар

@Goutham Найближчим ви отримаєте ellipsizeMode, встановлений на середину, я думаю.
Генрік Хансен

65

Ви можете використовувати 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


3
Поки контейнер елемента Text має значення Flex (я використовую, 1), текст буде усічений у контейнері.
прийом

3
ellipsizeMode = 'хвіст' не потрібен, оскільки для хвоста ellipsizeMode 'хвіст' є типовим значенням. Якщо ви не хочете показати еліпс на початку тексту, ви можете використовувати просто числоOfLines і він повинен працювати.
Каран Бхутвала

17
<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>

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

Результат: Lorem ipsum...


-10

const styles = theme => ({
 contentClass:{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp:1,
    WebkitBoxOrient:'vertical'
 }   
})
render () {
  return(
    <div className={classes.contentClass}>
      {'content'}
    </div>
  )
}


1
питання стосується більше React Native, де textOverflow не є дійсною опорою
Брайан Нгуен
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.