zoukankan      html  css  js  c++  java
  • 单行文本省略

    在html+css中,当我们遇到诸如商品详情的标题的输入时,我们会需要使用到:

    单行文本溢出省略

    核心css语句:

    1、overflow:hidden;  (顾名思义超出限定的宽度就隐藏内容)

    2、white-space: nowrap; (设置文字在一行显示不能换行)

    3、text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)

    多行文本溢出省略

    核心css语句:

    1、-webkit-line-clamp:2; (用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果,它需要组合其他的WebKit属性)

    2、display: -webkit-box; (和1结合使用,将对象作为弹性伸缩盒子模型显示 )

    3、-webkit-box-orient:vertical;( 和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 。)

    4、overflow:hidden;  (顾名思义超出限定的宽度就隐藏内容)

    5、text-overflow: ellipsis;(规定当文本溢出时显示省略符号来代表被修剪的文本)

    当编写小程序时,当我们遇到单行文本溢出时,和html+css编辑一样:

    但是,不能为flex布局,当布局为flex布局时,文本溢出无效

    布局应为

      display:inline-flex

  • 相关阅读:
    洛谷P3747 [六省联考2017]相逢是问候
    染色(dye)
    BZOJ1426: 收集邮票
    消息队列RabbitMQ
    CRM
    BBS
    版本控制
    RESTful API
    Luffy
    axios使用
  • 原文地址:https://www.cnblogs.com/Annely/p/10621122.html
Copyright © 2011-2022 走看看