一、显示一行加省略号:各浏览器兼容

.box{
    width: 100px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}.box需要是块级或行内块容器,padding为0(貌似可以加上下padding)
white-space:强制显示在一行;text-overflow:ellipsis:多余的以省略号代替;overflow:hidden:多余的文本隐藏

二、显示两行加省略号:仅适用于谷歌浏览器,同样不能加padding

.abcde{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

三、非谷歌浏览器,文字字数超出范围显示省略号,$('.ieover')为需要做如此处理的文本节点

$(document).ready(function(){
    $(function(){
        if(navigator.userAgent.toLowerCase().indexOf("chrome") == -1){
            $('.ieover').each(function(i, obj){
                var content;
                if($(this).text().length>=110){
                    console.log("www")
                    content=$(this).text().substr(0,110)+'...';
                    console.log($(this).text().substr(0,110))
                    $(this).text(content)
                }
            });
       }else{
       }
    })
});

css:在容器内文字超过容器范围,显示一行加省略号或者两行加省略号的更多相关文章

  1. [笔记]使用Go语言Redigo包在Docker容器内连接Redis容器的方法

    Docker容器之间的连接可以带来不少方便,下面记录下如何在自己容器内通过环境变量连接与之连接的Redis容器的方法. 先起一个Redis的Docker容器,命名为 redis,再起一个自己的Dock ...

  2. css实现行内文字垂直居中

    之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...

  3. css样式-区域内文字不会被选中

    要注意浏览器的兼容性: -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;

  4. css一div内文字居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. 文字超过字符长度 显示… 点点点 jquery

    在 script脚本区域里面定义如下方法 jQuery.fn.limit = function() { var self = $("[limit]"); self.each(fun ...

  6. 修改docker中mysql登入密码(包括容器内和本地远程登入的密码)

    查看docker中正在运行的容器 docker ps 进入MySQL 容器中 sudo docker exec -it cd800a1cd503 /bin/bash 在容器中: /etc/mysql/ ...

  7. 只用CSS实现容器内图片上下左右居中

    一直以来,大家都知道,DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内 ...

  8. javascript超过容器后显示省略号效果(兼容一行或者多行)

    javascript超过容器后显示省略号效果       在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...

  9. html中的div、td 、p 等容器内强制换行和不换行的实现

    div.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下1.强制不换行,同时以省略号结尾. 代码如下:< ...

随机推荐

  1. 跨域的案例 以百度接口/手写接口为例,还有jQuery写法

    仅在js部分输入即可 百度接口的案例 <script> function fn(data){ console.log(data) } </script> <script ...

  2. Zabbix 创建触发器

    #1   配置 主机名10.0.0.33 触发器 点击创建触发器 #2 #4 点击添加 #触发器添加完毕

  3. MySQL 独立表空间恢复案例

    创建表的时候就会得到元数据.可以通过定义的方式对表的元数据进行生成 这个地方要注意的是 独立表空间当中   ibd & frm分别存储的是什么数据? 表空间:文件系统,为了更好的扩容数据库的存 ...

  4. Jmeter(三十八)Jmeter Question 之 ‘批量执行SQL语句’

    知识使我们变得玩世不恭,智慧使我们变得冷酷无情,我们思考的太多,感知太少,除了机器,我们更需要人性,除了智慧,我们需要仁慈和善良. ------出自查理卓别林的演讲 前面有提到Jmeter使用JDBC ...

  5. remmina从linux远程桌面连接windows失败解决方法

    删除如下文件,重新连接 rm ~/.freerdp/known_hosts

  6. django-response对象

    HttpResponse 对象则需要 web 开发者自己创建,一般在视图函数中 return 回去.下面我们就来看看 HttpResponse 对象的各种细节 首先,这个对象由 HttpRespons ...

  7. solr 打分和排序机制(转载)

    以下来自solr in action. 包含: 词项频次.查询词项出现在当前查询文档中的次数. 反向文档频次.查询词项出现在所有文档总的次数. 此项权重. 标准化因子: 字段规范: 文档权重. 字段权 ...

  8. ES6的学习记录

    1.let命令: 基本用法: ES6新增了let命令,用来声明变量.用法类似于var,但是所声明的变量只在let命令所在的代码块内有效. { let a = 10; var b = 1; } cons ...

  9. SVN上拖下来的项目,缺少build path怎么办?

    在eclipse里用subeclipe从svn上拖下来的项目,看不见java build path怎么办? 原因那是因为你的两个配置文件:.project .classpath没有内容或者缺失. 重新 ...

  10. nginx 本地映射

    server{ listen 80; server_name www.test.com; ssi on; ssi_silent_errors on; //设置为on则在处理SSI文件出错时不输出错误信 ...