如何設置基於用戶ID的聊天框使用css

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 { 
 
\t display: block; 
 
\t height: auto; 
 
\t 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

你必須改變的絕對位置相對於用戶名類的位置，然後顯示塊添加到它所以消息在id下。還刪除頂部和右側的屬性：

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