消息尾部添加时间

最新推荐文章于 2024-10-01 23:20:42 发布

qq_42848750

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量320

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_42848750/article/details/108445902

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

消息尾部添加时间

前言

我们如何在发送消息的尾部添加事件呢？如以下这种效果
在这里插入图片描述

可能我们首先想到消息的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;
        }