• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > CSS3+HTML5 >  文字超出一行或者指正文

文字超出一行或者指定行数(多行)显示点点点(...),-webkit-line-clamp

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-07-26 10:28
分享到:
    关于标题提到的超出多行显示点点点“...”的问题,在之前我爱模板网总结了两种方法:
        css多行文字超出显示点点点...-webkit-line-clamp详解
        js控制多行文字超出显示点点点“...”

    一行文字超出显示点点点“...”,非常简单:
.line{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    注意:上面这段代码要想起作用,前提是.line这个容器必须有宽度,如果是flex-item,也必须固定宽度,如:
.line{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:500px;
    flex-shrink:0;  //必须加上,否则宽度没作用。
}
    多行文字超出显示点点点“...”(当然,也适用于一行):
.line2{
    -webkit-line-clamp: 2;  //这里就是行数,想限制多少行就写多少
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
(责任编辑:网页模板)
  • 本文标签:
  • -webkit-line-clamp
移动时代的前端加密
html5在手机端调用摄像头拍照和选择手机相册