CSS：在消息泡泡中模仿Whatsapp对齐的艰难时间

Question

我希望在whatsapp聊天泡泡中复制节省空间的CSS。具体来说，您可以看到当消息的最后一行有剩余空间时，时间文本适合，而当没有时间时，时间文本显示在消息正文下方。我原生反应，但任何弹性盒指令都会很棒。 感谢

目前，我正在使用Text标签来包裹身体和时间：

<View style={{ flexWrap: 'wrap', flexDirection: 'column' }}>
    <Text>
        <Text style={{ textAlign: 'left' }}>{body}</Text>
        <Text style={{ textAlign: 'right' }}>{time}</Text>
    </Text>
</View>

但是，我不确定如何将时间一直滑到气泡右侧

Answer 1

不是“移动”的时间，而是文本。 您必须检查文本是否有多行，如果没有，请在右边添加边距，并从底部删除边距。 时间是绝对位置。