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

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 не является допустимым свойством
Брайан Нгуен,