pc text-overflow:ellipsis; IE10 以下不生效

pc text-overflow:ellipsis; IE10 以下不生效

Alt text

1
2
3
4
5
6
.txt-hide{
    width:100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

实现这样一个效果，发现iE10 以下包含10 不生效。
查了一下兼容性，到ie8 都是没有问题的。

排查发现 是因为继承了 word-wrap: break-word; 样式所导致的。
修改之后为：

1
2
3
4
5
6
7
.txt-hide{
    width:100%;
    white-space: nowrap;
    word-wrap: normal!important;
    text-overflow: ellipsis;
    overflow: hidden;
}

展开全文 >>

iframe 在ios上无法滚动问题

iframe 在ios上无法滚动问题

场景：

A页面中用iframe 来嵌套B页面，而B页面的内容很多（超出一屏），想要的展示效果是看不出嵌套，正常滑动查看全部页面，所以给iframe设置高度与屏幕一样高。那么问题来：
安卓手机上完美无缺，而ios上不能滑动，就像是给一个div 设置了overflow:hidden;一样，超出的内容不能展示了。
那么我们去掉高度，发现ios上自动撑开了，跟B页面一样高。而安卓上发现iframe 高度是一个默认高度。
这样一来，我们需要判断设备来坐兼容了吗？显然在是不明智。
我们只需要这样：

1
2
3
4
<div class="page_box">
    <iframe id="iframe1" src="">  
    </iframe> 
</div>
1
2
3
4
.page_box{
     -webkit-overflow-scrolling: touch;  
     overflow-y: scroll;  
 }

给iframe 外边套一层，给这个容器设置这样的样式，给iframe 设置跟屏幕一样高度就OK了。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

小菜鸟，在挫折中成长。