zoukankan      html  css  js  c++  java
  • 文字溢出 生成 省略号

    单行文字变省略号:

    .box{
      /* 1.固定宽度 */
       100px;
      /* 2.空白处理:不折行 */
      white-space: nowrap;
    //<p> 中用: white-space:nowrap;
      /* 3.溢出隐藏 */   overflow: hidden;   /* 4.文本超出:省略号 */   text-overflow: ellipsis   }

    多行文字变省略号:

    .right_content a {
        /* 多行文字+省略号 */
         10rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        /* 行数 */
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    问题1:如果 -webkit-box-orient: vertical; 在浏览器中没生效,审查元素也没有此样式。

    原因及解决:autoprefixer不仅会帮你加-webkit-之类的prefixer,它还会帮你删除你自己写在 css/sass/less里的样式,真是厉害了

    关闭autoprefixer的自动删除功能,这样:(用两行注释包一下)

    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */

    再深究一下:

    1.autoprefixer会帮你删除老式过时的代码
    2.autoprefixer也会帮你增加新前缀

    你可以增加remove: false这个配置项,就不会开启自动移除功能

    postcss([ autoprefixer({ remove: false }) ]);

    不仅如此,你还可以只让它移除老前缀,不自动增加新前缀

    postcss([ autoprefixer({ add: false, browsers: [] })]);

    问题2:

    文字没有自动折行?

    解决:

    增加 word-break: break-all

    p{
        word-break: break-all
    }
  • 相关阅读:
    回顾
    单例模式
    元类
    反射和内置方法
    issubclass 和 isinstance和断点调试
    绑定方法和非绑定方法
    并发编程:IO多路复用。
    基于tcp的下载文件,以及struct模块的应用。
    并发编程:协程,异步调用。
    并发编程:GIL,线程池,进程池,阻塞,非阻塞,同步,异步
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/10315897.html
Copyright © 2011-2022 走看看