zoukankan      html  css  js  c++  java
  • ie8及其以下版本兼容性问题之文本省略

    1. 单行文本省略

    单行文本省略适用于文本超出内容显示区,则在末尾显示省略号

    1.1 普通文本超出省略

    普通文本超出显示省略号,示例:

    .p{
    	height: 30px
    	line-height: 30px;
    	font-size: 16px;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space:nowrap;
    }
    

    1.2 单元格文本超出省略

    首先应设置表格属性table-layoutfixed;然后再为单元格设置省略,示例:

    table{
    	table-layout: fixed;
    }
    table tr{
    	height: 30px;
    	line-height: 30px;
    	font-size: 16px;
    }
    table tr th,table tr td{
    	padding: 0 20px;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    }
    

    2. 多行文本省略

    多行文本省略适用于文本超出内容显示区高度,则在最后一行的末尾显示省略号

    2.1 css实现多行省略

    通过使用伪元素添加content为...的方式显示,此种方法需要引入半透明图片作为伪元素背景,示例:

    .p{
    	height: 66px;
    	line-height: 22px;
    	position: relative;
        overflow: hidden;
    }
    .p::after{
    	content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 15px 0px 10px;
        background: url(../images/modifyInfo/opacity.png) no-repeat right center;
    }
    .p:after{
    	content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 15px 0px 10px;
        background: url(../images/modifyInfo/opacity.png) no-repeat right center;
    }
    

    2.2 引入插件实现多行省略

    通过引入溢出省略插件dotdotdot.js实现多行省略

    下载地址: https://github.com/FrDH/jQuery.dotdotdot

    引入dotdotdot.js,为要省略的内容施加方法即可,示例:

    $('.p').dotdotdot();
    

    切换内容显示/隐藏

    $(function(){
    	//动态展开
    	var unReadNum = 0;
    	$('.right_newestState_con i').each(function(){
    		if($(this).hasClass('curr')){
    			unReadNum++;
    		}
    		$('.right_unreadInfo_p2 i').text(unReadNum);
    	});
    	$('.right_newestState_con em').each(function(){
    		this.flag = true;
    		var $this = $(this).parent().next();
    		function createDots() {
    			$this.dotdotdot();
    		}
    		function destroyDots() {
    			$this.trigger('destroy');
    		}
    		createDots();
    		$(this).on('click',function() {
    			if($(this)[0].flag){
    				unReadNum--;
    				$(this)[0].flag = false;
    				$(this).siblings('i').removeClass('curr');
    				$('.right_unreadInfo_p2 i').text(unReadNum);
    				if(unReadNum==0){
    					$('.body_right_unreadInfo span').remove();
    				}
    			}
    			$this.toggleClass('opend');
    			if ($this.hasClass('opend')) {
    				$(this).text('[点击收起]');
    				destroyDots();
    			} else {
    				$(this).text('[点击展开]');
    				createDots();
    			}
    		});
    	})
    })
    

    其他使用方法参考官方demo

  • 相关阅读:
    小端字节序与大端字节序
    V8引擎的垃圾回收策略
    TTL 和 DNS TTL 的区别
    详解 undefined 与 null 的区别
    Node.js 事件循环机制
    requestAnimationFrame 知多少?
    Web前端知识体系精简
    Vue.js 和 MVVM 小细节
    使用 Node.js 搭建 Web 服务器
    H5单页面手势滑屏切换原理
  • 原文地址:https://www.cnblogs.com/YSPyishuihan/p/7069270.html
Copyright © 2011-2022 走看看