css - 如何使用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

您必须将绝对位置更改为相对于用户名类的位置，然后向其添加显示 block ，以便消息显示在 id 下。同时删除 top 和 right 属性:

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