wie Chat-Box basierend auf Benutzer-ID mit css

Question

ich bin entwickeln Chat-Anwendung. Ich muss den Benutzernamen anzeigen. Wer die Nachricht eingibt, muss die Nachricht und die Benutzer-ID in der Chat-Box anzeigen.

Wenn Benutzer einen einzelnen Buchstaben in dieser Zeit eingeben, muss ich Benutzer-ID anzeigen, wie viel Länge ich anzeigen muss. aber ich bin nicht in der Lage Anzeige Benutzer-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

Sie müssen sich ändern Position absolute Positionierung in Bezug auf die Benutzerklasse nach draußen zu gehen, und dann Anzeigeblock, um es hinzuzufügen so geht die Nachricht unter der ID. Entfernen Sie auch oben und rechts Eigenschaften:

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