• 技术文章 >Web开发 >css教程

    css设置溢出不换行的方法

    小妮浅浅小妮浅浅2021-07-19 17:09:58转载282

    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学习指路:css教程

    本文转载于php中文网,如有侵犯联系作者修改。

    专题推荐:css溢出不换行
    品易云
    上一篇:css写五角星的方法 下一篇:css使用transform垂直对齐

    相关文章推荐

    • css后代选择器的介绍• css中id与class的区别• css加滚动条的方法• css语法规则的组成• css和html的区别分析• css中浮动如何理解• css中tag的介绍• js和css有什么区别• css3和less有什么区别• css设置所有标签的方法• css样式冲突的解决办法• css行内样式的介绍• css中流的概念介绍• css文档流的两种特性• css写五角星的方法

    全部评论我要评论

  • 取消发布评论
  • 

    Python学习网