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

.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. NameNode配置HA后及其反过程Hive路径不正确的问题解决

    在CDH5.7下,配置了NameNode的HA后,Hive无正常查询数据了,但是其他的组件HDFS , HBase ,Spark都正常的.Hive新建表出现如下异常: CREATE TABLE `x_ ...

  2. MySQL数据库的高可用方案总结

    高可用架构对于互联网服务基本是标配,无论是应用服务还是数据库服务都需要做到高可用.虽然互联网服务号称7*24小时不间断服务,但多多少少有一些时候服务不可用,比如某些时候网页打不开,百度不能搜索或者无法 ...

  3. Page Cache, the Affair Between Memory and Files.页面缓存-内存与文件的那些事

    原文标题:Page Cache, the Affair Between Memory and Files 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限 ...

  4. 《Linux 性能及调优指南》1.4 硬盘I/O子系统

    翻译:飞哥 (http://hi.baidu.com/imlidapeng) 版权所有,尊重他人劳动成果,转载时请注明作者和原始出处及本声明. 原文名称:<Linux Performance a ...

  5. Android标题头滑动渐变,Titlebar滑动渐变,仿美团饿了么标题头渐变;

    原理就是滑动中改变透明度: 核心代码: rv.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public vo ...

  6. solr 忽略大小写

    1.types标签下加入如下fieldType <fieldType name="str_lower" class="solr.TextField" so ...

  7. oracle的sqlldr常见问题

    http://www.orafaq.com/wiki/SQL*Loader_FAQ#Can_one_skip_certain_columns_while_loading_data.3F What is ...

  8. Python ————反射机制

    python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr,改四个函数分别用于对对象内部执行:检查是否含有某成员.获取成员.设置成员.删除成员. ...

  9. angularjs的cache

    首先要引入angular-cookies.js插件 angular.module('app').service('cache', ['$cookies', function($cookies){ th ...

  10. 转载:centos安装redis

    转载自:https://www.cnblogs.com/renzhicai/p/7773080.html CentOS下Redis的安装 [TOC] 前言 安装Redis需要知道自己需要哪个版本,有针 ...