[font multi line display ellipsis] and [dialog box] implementation ----- case explanation, executable code

One 、 Font multi line display ellipsis

<style> .p3 {
       margin-top: 10px; color: rgb(129, 128, 128); -webkit-line-clamp: 2; /*【 Control the number of rows displayed here 】*/ -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: break-all; display: -webkit-box; } </style>
<span class="p3"></span>

Two 、 Dialog box

1、 Exhibition

2、 Code

<div id="loginout">
                <p> Log out </p>
            </div>

#loginout {
    
  position: absolute;
  top: 70px;
  right: 0px;
  width: 100px;
  height: 130px;
  border: 4px solid rgb(61, 59, 59);
  text-align: center;
  &:before {
    
    content: "";
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid transparent;
    border-top-color: rgb(61, 59, 59);
    border-left-color: rgb(61, 59, 59); /* The border used here */
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -5px;
    transform: rotate(45deg);
  }
}

3、 Look at the ： White square rotate after Cover in On the rectangle