消息尾部添加时间

前言

我们如何在发送消息的尾部添加事件呢？如以下这种效果

可能我们首先想到消息的div加定位position: relative 右侧加个padding-right;然后在time的span加position: absolute;如果一行是完全ok的，但是多行的情况下就不行的非常丑陋。我们正确的做法应该是在消息的文本后面加个span，0:00，然后.hide的visibility: hidden;就行了，因为visibility是实际占位的，而display是不占空间的。具体代码如下

<li
        v-for="(item,index) in selectedChat.messages"
        :key="index"
        class="chat-detail chat-detail-left"
      >
        <div class="chat-user"><img :src="selectedChat.user.img"></div>
        <p class="chat-text clearfix">{{item.content}}
          <span class="hide">0:00</span><span class="time">{{item.date | formatTime}}</span></p>
</li>
      
      
.chat-text {
        display: inline-block;
        max-width: 250px;
        position: relative;
        bottom: 0;
        margin-top: 10px;
        margin-bottom: 6px;
        color: #000;
        background: #f1f1f4;
        font-size: 16px;
        line-height: 25px;
        text-align: left;
        word-break: break-all;
        .hide {
          visibility: hidden;
        }
        .time {
          position: absolute;
          display: inline-block;
          font-size: 10px;
          color: #aaaaab;
          bottom: 2px;
        }