140

В моем приложении длинный текст, и мне нужно его обрезать и добавить в конец три точки.

Как я могу сделать это в элементе React Native Text?

Спасибо

react-native ellipsis

— Ран Ефет
источник

1

Вам дали идеальный ответ. Может тебе стоит принять это?

— Moss Palmer

32

использовать numberOfLines

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

или если вы знаете / или можете вычислить максимальное количество символов в строке, можно использовать подстроку JS.

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

— boredgames
источник

85

Это не выход. Текст переменной ширины.

— Marc

2

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

— fostertime

numberOfLines = {1}

— mayaa

1

Предоставленная ссылка не работает, и решение должно заключаться в использовании встроенной поддержки react-native, которая объясняется в других ответах.

— Тайлер

408

Используйте `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

Может быть, очевидно, а может и нет, нужно также указать ширину в тексте.

— Sten Muchow

Интересный вопрос: как вычислить количество строк? Потому что я думаю, никто никогда не знает об этом заранее (поскольку у него нет причин быть статичным).

— cglacet 05

1

Хороший ответ, но если вы хотите такое же поведение, как эллипсы css, нужно использовать ellipsizeMode = 'tail' .

— Андрей Пацейко

@RanYefet, вам следует подумать о том, чтобы пометить этот ответ как правильный, это поможет другим, спасибо!

— Balthazar

@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), текст внутри контейнера будет усечен.

— fostertime

3

ellipsizeMode = 'tail' не требуется, поскольку 'tail' является значением по умолчанию для ellipsizeMode. Если вы не хотите отображать эллипс в начале текста, вы можете использовать только опору numberOfLines, и она должна работать.

— Каран Бхутвала

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

— AndriyFM
источник

-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 не является допустимым свойством

— Брайан Нгуен,

Как применить эффект многоточия к тексту

Используйте numberOfLinesпараметр в Textкомпоненте:

Используйте ellipsizeModeпараметр, чтобы переместить многоточие на headили middle. tailзначение по умолчанию.

Используйте `numberOfLines`параметр в `Text`компоненте:

Используйте `ellipsizeMode`параметр, чтобы переместить многоточие на `head`или `middle`. `tail`значение по умолчанию.