豫ICP备17040950号-2

artTemplate

前言

在开发过程中，常常要实现这样一种效果：获取数据，并且插入到当前页面。最基本的做法是把获取到的数据拼接到一个字符串中，然后使用html()或者append()函数插入到页面中。这种做法，拼接字符串时很麻烦。本文中，小编要介绍一下ArtTemplate，一个超快的前端模板引擎。

设计开发

more >>

JavaScript模板引擎

前言

后端渲染和前端渲染，分类依据在于浏览器到底做了什么事情。

后端渲染HTML的情况下，浏览器会直接接收到经过服务器计算之后的呈现给用户的最终的HTML字符串，这里的计算就是服务器经过解析存放在服务器端的模板文件来完成的，在这种情况下，浏览器只进行了HTML的解析，以及通过操作系统提供的操纵显示器显示内容的系统调用在显示器上把HTML所代表的图像显示给用户。

前端渲染就是指浏览器会从后端得到一些信息，这些信息或许是适用于题主所说的angularjs的模板文件，亦或是JSON等各种数据交换格式所包装的数据，甚至是直接的合法的HTML字符串。这些形式都不重要，重要的是，将这些信息组织排列形成最终可读的HTML字符串是由浏览器来完成的，在形成了HTML字符串之后，再进行显示。

根据前后端渲染的不同，模板引擎也分为两种，后端模板引擎和前端模板引擎。而前端模板引擎，就是本文要说的JavaScript模板引擎。

设计开发

more >>

CSS实现文本溢出显示省略号

文章目录
  1. 1. 单行文本溢出显示省略号
  2. 2. 多行文本溢出显示省略号
  3. 3. 怎样在js中判断文本是否溢出
    1. 3.1. 思路一
    2. 3.2. 思路二
  4. 4. 后记
  5. 5. 书签

单行文本溢出显示省略号

1
2
3
4
width: 300px; 
overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap;

如果字符串长度超过300px，那么超出部分就变成...。

多行文本溢出显示省略号

1
2
3
4
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

因为使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

怎样在js中判断文本是否溢出

问题描述：
一段文字限定行数，使用css把多余文字显示为省略号，请问怎么通过js判断这段文字是否有文字显示为省略号？

思路一

王晨帅哥提供了一个思路：取消css的-webkit-line-clamp属性，看看元素高度是否发生了变化，变化了就是有文字显示为省略号。

好想法，最后小编改进后如下：这段文字在页面上放两份，一份限定行数，正常显示；另一份不限定行数，隐藏起来。然后，对比这两段文字的高度是否相同。
具体实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// scss部分
.info{
    font-size: 1.2rem;
    margin-top: .6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    p{
        &:not(:first-child){
            margin-top: .4rem;
        };  
        line-height: 1.8rem;
    }
}

.info-hidden{
    position: fixed;
    z-index: -10;
    visibility: hidden;
    font-size: 1.2rem;
    margin-top: .6rem;
    p{
        &:not(:first-child){
            margin-top: .4rem;
        };  
        line-height: 1.8rem;
    }
}
1
2
3
4
5
6
// js部分
var $info = $('.info');
var $info_hidden = $('.info-hidden');
if($info.height() === $info_hidden.height()){
    $('.more').hide();
}

思路二

后来张伟林帅哥提供了一个更好的思路：既然已经知道了限定的行数，那么判断一个高度就可以了。结合line-height，高度用scrollheight，判断scrollheight > line-height*你决定的行数。

小编马上搜索了一个scrollheight，发现，原来scrollHeight可以返回元素的完整高度。那么，比较一下scrollHeight和height不就可以了么？
具体实现：

1
2
3
4
5
6
7
// js部分
var $info = $('.info');
console.log($info.height());
console.log($info[0].scrollHeight);
if($info.height() >= $info[0].scrollHeight){
    $('.more').hide();
}

后记

利用js也可以实现文本溢出显示省略号，可以参考书签中的dotdotdot，很形象的名字。。。

书签

CSS实现单行、多行文本溢出显示省略号（…）
http://www.daqianduan.com/6179.html

jQuery.dotdotdot
http://www.bootcdn.cn/jQuery.dotdotdot/

设计开发