CSS：在消息气泡中模仿 Whatsapp 对齐的艰难时期答案

【问题标题】：CSS: Tough time imitating Whatsapp alignment in message bubbleCSS：在消息气泡中模仿 Whatsapp 对齐的艰难时期
【发布时间】：2018-04-16 01:54:24
【问题描述】：

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

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

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

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

【问题讨论】：

我不确定您的要求。你能指出“文本出现在邮件正文下方”和“文本修复”是什么意思吗？
谢谢，现在清楚多了。
您能告诉我们您当前使用的代码不起作用吗？
编辑以解决您的评论

标签： css react-native

【解决方案1】：

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

【讨论】：