CSS控制文本内容一行或多行超出部分显示省略号

单行文本超出显示省略号

p{
    width: 200px;
    height: 100px;
    border: 1px solid black;
   /* 强制超出不换行 */
   white-space: nowrap;
   /* 超出隐藏 */
   overflow: hidden;
   /* 文本超出显示成... */
   text-overflow: ellipsis;
}

多行文本超出显示省略号

div{
   padding: 0 10px;
   width: 200px;
   /* 不定义高度 */
   /* height: 200px; */
   border: 1px #000000 solid;
   /* 文本超出显示成... */
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   /* 设置可显示的行数 */
   -webkit-line-clamp: 4;
   overflow: hidden;
}

猜你喜欢

转载自blog.csdn.net/chen3647/article/details/127120101