【字体多行显示省略号】及【对话框】实现-----案例详解，可执行代码

一、 字体多行显示省略号

<style>
	.p3 {
        margin-top: 10px;
        color: rgb(129, 128, 128);
        -webkit-line-clamp: 2; /*【此处控制显示行数】*/
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        display: -webkit-box;
      }
</style>
<span class="p3"></span>

二、 对话框

1、 展示

2、 代码

<div id="loginout">
                <p>退出登录</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); /*此处用的边框*/
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -5px;
    transform: rotate(45deg);
  }
}

3、 分析一下 ： 白底正方形rotate后 盖在 矩形上