どのようにCSSを使用してユーザIDに基づいてチャットボックスを設定する

Question

私はチャットアプリケーションを開発しています。メッセージを入力するユーザー名を表示する必要があります。メッセージとユーザーIDをチャットボックスに表示する必要があります。

ユーザーが1文字入力した場合は、表示する必要があるユーザー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; 
}