javascript - 如何确保列表项的文本只有一行？

Question

我有一个带有文本标题的项目列表。我想做的是，如果文本超过一行，则剪掉前面的三个字符并改为...。

这就是我调用呈现标题的辅助函数的方式:

<ListItem
  title={this.renderTitle(todoItem.text)}
  titleStyle={{ color: '#FCEFEF', fontSize: 16 }}
/>

这是我的辅助函数:

renderTitle(text) {
    if (text.length > 55) {
      const badCharacters = text.length - 54;
      let goodText = text.substring(0, text.length - badCharacters);
      goodText += '...';
      return goodText; //text up until character 51, then 52,53,54 is ...
    }
    return text;
  }

我不确定如何检查这一点，我尝试计算字符数，但这不起作用。似乎限制的不是字符数，而是字符的宽度，例如，如果字符串全部为“f”，则在一行上可以包含比全部为“a”更多的字符。

Answer 1

评论是正确的，解决方案是这样的:

<ListItem
  title={
    <Text style={{ color: '#FCEFEF', fontSize: 16 }} ellipsizeMode='tail' numberOfLines={1}>
        {todoItem.text}
    </Text>
}