• 关于文字内容溢出用点点点(...)省略号表示


    常规css方法——可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示

    这是一段测试文字,主要是用来测试文字溢出后是否会用省略号显示。
    1 .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}

    jQuery限制字符字数的方法

    1 HTML部分:
    2 <div class="zxx_text_overflow_5">你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,天啊!</div>
     1 没有css啦,只有js代码:
     2 $(document).ready(function(){
     3     //限制字符个数
     4     $(".zxx_text_overflow_5").each(function(){
     5         var maxwidth=23;
     6         if($(this).text().length>maxwidth){
     7             $(this).text($(this).text().substring(0,maxwidth));
     8             $(this).html($(this).html()+'...');
     9         }
    10     });
    11 });

    jQuery自动判断宽度是否超出的方法

    1 HTML部分:
    2 <div class="zxx_text_overflow_6">你个杀千刀的,怎么写了这么多的文字,我要被拦腰截断了啊,kitty救我!</div>

     1 css部分: 2 .zxx_text_overflow_6{width:400px;} 

     1 js部分:
     2 var wordLimit=function(){
     3     $(".zxx_text_overflow_6").each(function(){
     4         var copyThis = $(this.cloneNode(true)).hide().css({
     5             'position': 'absolute',
     6             'width': 'auto',
     7             'overflow': 'visible'
     8         });    
     9         $(this).after(copyThis);
    10         if(copyThis.width()>$(this).width()){
    11             $(this).text($(this).text().substring(0,$(this).html().length-4));
    12             $(this).html($(this).html()+'...');
    13             copyThis.remove();
    14             wordLimit();
    15         }else{
    16             copyThis.remove(); //清除复制
    17             return;
    18         }
    19     });
    20 }
    21 wordLimit();

    前者直接限定字符个数,后者通过宽度判断,去掉最后一个字符,循环,直到文字内容宽度小于div的限制宽度。

    It's my whole life!
  • 相关阅读:
    Laravel Passport token过期后判断refresh_token是否过期
    js 数组随机排序
    jquery的animate关于background-position属性
    css hack 汇整
    顶部导航--向上滚动的时候出现,向下滚动的时候隐藏
    手机端全局样式表整理(mobile)
    AR专用汉明码
    css常用命名规则
    晚11点
    当 IDENTITY_INSERT 设置为 OFF 时,不能为表‘XXX’中的标识列插入显式值。
  • 原文地址:https://www.cnblogs.com/jiaweniv/p/4920717.html
Copyright © 2020-2023  润新知