中间点和省略

1.中间点(会自动根据左右变化大小颜色)
&middot

2.超出省略(只适合内核为webkit的浏览器)

   overflow:hidden;
    text-overflow:ellipsis;//超出用省略号代替
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;//行数
    height: 1.25rem;//必须给固定高

3.如果要适应其他内核,比如火狐的话,可以考虑限制字数

 $(function () {
            $(document).ready(function () {
                //限制字符个数
                $('.dot').each(function () {
                    var maxwidth = 98;
                    if ($(this).text().length > maxwidth) {
                        $(this).text($(this).text().substring(0, maxwidth));
                        $(this).html($(this).html() + '…');
                    }
                });
            })
        })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,121评论 1 45
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,050评论 3 119
  • (一)-webkit-tap-highlight-color 想要禁用这个高亮,设置颜色的alpha值为0即可。 ...
    毛线内裤阅读 3,359评论 0 0
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,389评论 0 7
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 4,200评论 0 3