flex布局搭配超出一行显示省略号

.xi-content-area {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #eeeeee;

        .xi-content {
            flex: 1;
            padding-right: 10px;
            width: 0;
            .xi-title {
                display: flex;
                .title {
                    font-size: 16px;
                    color: #333;
                    font-weight: bold;
                }
                .company {
                    flex: 1;
                    color: #4e90dc;
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                }
            }
            .xi-desc {
                padding-top: 6px;
                color: #b2b2b2;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: break-all;
            }
        }
        .xi-time {
            text-align: right;
            color: #bebebe;
            font-size: 12px;
        }
    }

<View className='xi-content-area'>
                <View className='xi-content'>
                    <View className='xi-title'>
                        <View className='title'>
                            {data.chatLatestMsgVO?.withChatUser?.profileName.length > 5
                                ? data.chatLatestMsgVO?.withChatUser?.profileName.slice(0, 5) +
                                  '...'
                                : data.chatLatestMsgVO?.withChatUser?.profileName}
                        </View>
                        <View className='company'>
                            {data.chatLatestMsgVO?.withChatUser?.comName
                                ? '@' + data.chatLatestMsgVO?.withChatUser?.comName
                                : data.chatLatestMsgVO?.withChatUser?.comName}
                        </View>
                    </View>
                    <View className='xi-desc'>
                        {data.chatLatestMsgVO?.messageList[0]?.body?.content}
                    </View>
                </View>
                <View className='xi-time'>
                    {formatTimeAsWeChat(data.msgLatestTime)}
                </View>
            </View>