如何使用 css 根据用户 ID 设置聊天框

Question

我正在开发聊天应用程序。我需要显示输入消息的用户名我需要在聊天框中显示消息和用户 ID。

如果此时用户输入单个字母，我需要向用户显示我需要显示的长度。但我无法显示去外面的用户 ID

.t {
  position: relative;
  background: white;
  text-align: right;
      padding-top: 18px;
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
  border-radius: 6px;
  border: 1px solid #ccc;
  float: right;
  font-size: 12px;
     margin-bottom: 7px;
    margin-right: 4px;
    margin-left: 4px;
}

.t::before {
  content: '';
  position: absolute;
  visibility: visible;
  top: -1px;
  right: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #ccc;
}

.t::after {
  content: '';
  position: absolute;
  visibility: visible;
  top: 0px;
  right: -8px;
  border: 10px solid transparent;
  border-top: 10px solid white;
  clear: both;
  
}

.t {
  clear: right;
}

.t img {
 display: block;
 height: auto;
 max-width: 100%;
}
.t .username {
  position: absolute;
  font-weight: bold;
  font-size: 12px;
  color: #8e0035;
  top: 4px;
  right: 10px;
}


.t .message{
   word-break: break-all;
}

<div class="t">
  <span class="username">kranthi</span>
  <span class="message">This is a very long message, as you can see it will be placed in multiple lines..This is a very long message, as you can see it will be placed in multiple lines.</span>
</div>

<div class="t">
  <span class="username">kranthi</span>
  <span class="message">thanks</span>
</div>

<div class="t">
  <span class="username">27535635496</span>
  <span class="message">1</span>
</div>

Answer 1

您必须将位置绝对更改为相对于用户名 class 的位置，然后向其添加显示块，以便消息显示在 id 下。同时删除顶部和右侧属性：

.t .username {
  position: relative;
  display: block;
  font-weight: bold;
  font-size: 12px;
  color: #8e0035;
}

如何使用 css 根据用户 ID 设置聊天框

how to to set chat box based on user id using css

css

chat