如何缩小超过屏幕宽度的字符串

Question

正如您在屏幕上看到的那样，内容（New Cateogry fromStylepost）超出了屏幕的正常宽度并打破了网格样式。

如何将每个超出的字符串设置为＆＃39; ...＆＃39;？

例如，我想将New Cateogry fromStylepost转换为New Category fro...

我使用FlatList，这是renderItem函数

return (
  <TouchableWithoutFeedback
    onPress={...}>
    <View style={styles.rowContainer}>
      {this._renderImage(item)}
      <RkText rkType="primary3">{item.name}</RkText> //I need to style this!
      <RkText rkType="secondary2 hintColor">{item.length} Style</RkText>
    </View>
  </TouchableWithoutFeedback>
);

谢谢！

Answer 1

您可以使用numberOfLines https://facebook.github.io/react-native/docs/text.html#numberoflines 并ellipSizeMode https://facebook.github.io/react-native/docs/text.html#ellipsizemode

示例：

<Text numberOfLines={1} ellipsizeMode='tail'>my text is very very very very very long<Text>

Answer 2

你可以使用＆＃39; letterSpacing＆＃39;但仅适用于iOS

了解详情 https://facebook.github.io/react-native/docs/text.html

Answer 3

每种字体都有字体和字体大小（以像素为单位）。

可以计算可能的字符数，如：

NunberOfCharPerLine = WidthInPixel * FontConstant / FontSize

因此，如果字体常量（由字体系列设置）设置为1.9，则控件宽度为100像素，并选择字体大小为18px，行中显示的字符数为：

100 * 1.9 / 18为10.5（约10个字符）。

字体常量的一些示例：

American Typewriter = 2.14

Baskerville = 2.14

Georgia = 1.91

Times New Roman = 2.21

Arial = 1.91

Calibri = 2.1

Helvetica Neue = 1.9

Lucida Grande = 1.91

Tahoma = 1.91

Trebuchet MS = 2.11

Verdana = 1.73

Courier New = 1.64