Перечисление EllipsizeMode

Перечисление EllipsizeMode описывает строки для параметра ellipsizeMode у компонента Text. Имеет смысл вместе с numberOfLines, когда текст не помещается в заданное число строк.

Синтаксис

<Text numberOfLines={1} ellipsizeMode="tail">
	abcde
</Text>

Значения

Значение	Описание
`'head'`	Многоточие в начале, виден конец строки.
`'middle'`	Многоточие в середине, видны начало и конец.
`'tail'`	Многоточие в конце, видно начало строки.
`'clip'`	Текст обрезается без многоточия.

Значение по умолчанию: 'tail'.

Пример

Давайте обрезать длинную строку с хвостом:

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View style={styles.box}>
			<Text numberOfLines={1} ellipsizeMode="tail">
				abcde abcde abcde abcde abcde
			</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	box: {
		width: 120,
	},
});

На экране одна строка, конец скрыт многоточием.

Пример

Давайте показать начало через 'head':

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
	return (
		<View style={styles.box}>
			<Text numberOfLines={1} ellipsizeMode="head">
				12345 12345 12345 12345 12345
			</Text>
		</View>
	);
}

const styles = StyleSheet.create({
	box: {
		width: 120,
	},
});

На экране виден правый фрагмент строки, слева многоточие.

Смотрите также

компонент Text,
который принимает numberOfLines и ellipsizeMode
перечисление TextAlign,
которое выравнивает многострочный текст
компонент View,
который ограничивает ширину блока
компонент ScrollView,
который прокручивает длинный текст целиком