• 技术文章 >web前端 >前端问答

    css怎么设置溢出不换行

    藏色散人藏色散人2021-07-19 16:39:34原创142

    css设置溢出不换行的方法:首先创建一个HTML示例文件;然后定义div;最后通过设置“overflow: hidden;text-overflow:ellipsis;”等css样式实现溢出不换行效果即可。

    本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    css怎么设置溢出不换行?

    css文本溢出不换行,省略号显示

    单行文本溢出;

    设置宽度,多于文本溢出,显示省略号;

    div{
    width:300px;    
    overflow: hidden;    
    text-overflow:ellipsis;    
    whitewhite-space: nowrap;
    }

    多行文本溢出;

    使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

    注意:

    1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

    2.display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

    3.-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

    div{
    display: -webkit-box;    
    -webkit-box-orient: vertical;    
    -webkit-line-clamp: 3;    
    overflow: hidden;
    }

    不是Webkit浏览器的暂时未有~~

    推荐学习:《css视频教程

    以上就是css怎么设置溢出不换行的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:javascript有哪些基本数据类型 下一篇:html css怎么隐藏滚动条
    VIP会员

    相关文章推荐

    • css行内样式是内部样式吗• CSS选择器学习之聊聊复合选择器(详细介绍)• 使用JS或CSS如何实现瀑布流布局,几种方案介绍• css怎么写五角星• css如何制作三角形

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网