CSS를 사용하여 사용자 ID를 기반으로 채팅 상자를 설정하는 방법

Question

채팅 응용 프로그램을 개발 중입니다. 메시지를 입력 한 사용자 이름을 보여줄 필요가 있습니다. 채팅 상자에 메시지와 사용자 ID를 표시해야합니다.

사용자가 단일 문자를 입력하면 사용자 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

하겠어 그래서 이드는 메시지를받습니다. 또한 상단 및 우측 속성을 제거하십시오.

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