apply()和call()是JavaScript中常用的两个方法了，今天看到两种很简洁明了的解释，记一下。



### 解释一

`call` 和 `apply` 都是为了改变某个函数运行时的 `context`(即上下文) 而存在的，换句话说，就是为了改变函数体内部 `this` 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

二者的作用完全一样，只是接受参数的方式不太一样。例如，有一个函数 func1 定义如下：

```
var func1 = function(arg1, arg2) {};
```

就可以通过 `func1.call(this, arg1, arg2);` 或者 `func1.apply(this, [arg1, arg2]);` 来调用。其中 this 是你想指定的上下文，他可以任何一个 JavaScript 对象 (JavaScript 中一切皆对象)，`call` 需要把参数按顺序传递进去，而 `apply` 则是把参数放在数组里。

JavaScript 中，某个函数的参数数量是不固定的，因此要说适用条件的话，

- 当你的参数是明确知道数量时，用 call，
- 而不确定的时候，用 apply，然后把参数 push 进数组传递进去。
- 当参数数量不确定时，函数内部也可以通过 arguments 这个数组来便利所有的参数。


------------

### 解释二

在javascript OOP中，我们经常会这样定义：

```
function cat(){ }
cat.prototype={
    food:"fish",
    say: function(){
    alert("I love "+this.food);
    }
}
var blackCat = new cat;
blackCat.say();
```

但是如果我们有一个对象`whiteDog = {food:"bone"},`我们不想对它重新定义`say`方法，那么我们可以通过`call`或`apply`用`blackCat`的`say`方法：
```
blackCat.say.call(whiteDog);
```

所以，可以看出`call`和`apply`是为了动态改变`this`而出现的，**当一个`object`没有某个方法，但是其他的有，我们可以借助`call`或`apply`用其它对象的方法来操作。**

用的比较多的，通过`document.getElementsByTagName`选择的`dom`节点是一种类数组。它不能直接应用`Array`下的`push,pop`等方法。我们可以通过：
```
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
```
这样`domNodes`就可以应用`Array`下的所有方法了。

> 以上均出自知乎

JS 中的 apply 和 call

重装系统前备份是个好习惯⊙﹏⊙



### 更新前备份

- 备份好 hexo 目录下的`_config.yml`，`theme/`，`source/`，`scaffolds/`，`package.json`，`.gitignore `，`node_modules`（当然如果你硬盘空间够大，备份整个 hexo 文件夹也可以）。然后把 hexo 目录里面的东西全部删掉。

- 备份用户目录下的文件：开始，你的 windows 用户名，打开你的用户文件夹后备份`.ssh`文件夹和`.gitconfig`、`_netrc`以及`_viminfo`这三个文件。

### 更新后恢复

-  安装 `node.js` 和 `git`

- 安装 Hexo

```
npm install hexo-cli -g
cd D:\hexo
hexo init
npm install
```
打开原来的 hexo 博客所在文件夹，将之前备份的文件夹粘贴进去，覆盖原文件夹。

- 和 gitcafe 建立连接

在 gitbash 里输入：
```
git config --global user.email "Your email"
git config --global user.name "Your name"
```
然后【C:\Users\wmaqingbo】，打开你的用户文件夹，粘贴并替换事先备份的`.ssh文件夹`和`.gitconfig`、`_netrc`以及`_viminfo`这三个文件。
然后再输入：
```
ssh -T git@gitcafe.com
```
这时会看到显示连接成功信息。

### 没有提前备份的情况

我的情况：电脑重装了系统，hexo 博客文件夹还在 D 盘存着，完好无损，但是C盘的用户文件夹内容丢失。现在只能借助这些文件恢复部署。具体方法如下：

- 将 hexo 文件夹下的文件全部复制到其他地方进行备份

- 安装 `node.js` 和 `git`

- 安装  hexo

```
npm install hexo-cli -g
cd D:\hexo
hexo init
npm install
```

  打开备份的 hexo 文件夹，选择`_config.yml`，`theme/`，`source/`，`scaffolds/`，`package.json`，`.gitignore `，`node_modules`这些项目，粘贴到【D:\hexo】覆盖新安装的文件。

- 安装部署插件

```
npm install hexo-deployer-git --save    //hexo d 部署到git插件
```

- 配置 git 个人信息，生成新的 `ssh 密钥`

请参考文章：《使用 Github SSH Key 一键部署 Hexo》

- 测试是否成功。

```
hexo g
hexo d
```

重装系统后，恢复部署Hexo博客

怎样休息才能休息的最好？？



你理解的休息是什么？一个饱觉？一阵疯玩？到KTV释放饭后的一串饱嗝？

休息的真正含义是什么？是恢复疲劳，放松神经，当你重新投入工作与学习的时候觉得又是一个精力充沛的新人。

如果你的休息方式并不能为你带来这些，那么，无论这些活动的名字听起来有多轻松，看上去有多High，它都是一种错误。

### 脑力劳动者，补瞌睡对你没什么用

你写了一天的文案，敲了一天的代码，当一切都结束了，你叹到：太累了，这一天我要睡个好觉。我们的常识使得我们对疲劳的第一反应就是“去躺躺吧”。但这是一个陷阱。

**睡眠的确是一种有效的休息方式，但它主要对睡眠不足着或体力劳动者适用。**

对体力劳动者来说，“疲劳”主要是由体内产生大量酸性物质引起，如果十分疲劳，应采取静的休息方式。通过睡觉，可以把失去的能量补充回来，把堆积的废物排除出去。如果不是很累，也可以在床上先躺一躺，闭目静息，让全身肌肉和神经完全放松后，再起来活动活动。

但如果你是坐办公室的，大脑皮层极度兴奋，而身体却处于低兴奋状态，对待这种疲劳，睡眠能起到的作用不大，（除非你是熬夜加班，连正常睡眠时间都达不到）因为你需要的不是通过“静止”恢复体能，而是要找个事儿把神经放松下来。这样你可以理解为什么你周末两天不出门依旧无精打采，而只需下班后游泳半小时就神采奕奕。

### 不必停下来，只是换一下

既然睡觉不能帮助我们休息大脑，那什么办法才可以？

答案是不停止活动，而只是改变活动的内容。

大脑皮质的一百多亿神经细胞，功能都不一样，它们以不同的方式排列组合成各不相同的联合功能区，这一区域活动，另一区域就休息。所以，通过改换活动内容，就能使大脑的不同区域得到休息。
心理生理学家谢切诺夫做过一个实验。为了消除右手的疲劳，他采取两种方式：一种是让两只手静止休息，另一种是在右手静止的同时又让左手适当活动，然后在疲劳测量器上对右手的握力进行测试。结果表明，在左手活动的情况下，右手的疲劳消除得更快。这证明变换人的活动内容确实是积极的休息方式。

比如你星期五写了5个小时的企划案， 最好第二天去给你的盆栽们剪枝而不是睡到太阳晒屁股。还有一点，当你无法选择由脑力劳动转入体力劳动时，你不妨在脑力劳动内部转换。

法国杰出的启蒙思想家卢梭就讲过他的心得：“我本不是一个生来适于研究学问的人，因为我用功的时间稍长一些就感到疲倦，甚至我不能一连半小时集中精力于一个问题上。但是，我连续研究几个不同的问题，即使是不间断，我也能够轻松愉快地一个一个地寻思下去，这一个问题可以消除另一个问题所带来的疲劳，用不着休息一下脑筋。于是，我就在我的治学中充分利用我所发现的这一特点，对一些问题交替进行研究。这样，即使我整天用功也不觉得疲倦了。”

所以，这天你要是有好几个问题要处理，最好交替进行，而不要处理完一个再开始的二个，那样会很快被耗尽。

### 最好的休息，是让你重燃生活的热情

我们的疲惫主要来自对现有的一层不变的生活的厌倦。所以最好的休息项目就是那些让我们重新找到生活和工作热情的活动。如果你干完一件事，能够幸福地感叹“明天又是新的一天！”，那这件事对你来说就是最好的恢复热情，调节情绪的方法。

我们给你开了下面一些活动清单，基本思路是以“做”来解决“累”，用积极休息取代消极放纵。当然，最适合你的方法还是要你自己探索。事实上如果你觉得打扫卫生比坐过山车是更好的放松，那么就去吧，别管世界上的其他人都在玩什么。

- 用看两小时让你开怀的漫画或小说代替去KTV唱那些一成不变的口水歌

- 试着放弃在周六晚上去酒吧，10点入睡，然后在7点起床，去没有人的街上走走，或是看看你从来没有机会看到的早间剧场，你会发现这一天可以和过去的千万个周末都不相同。

- 不要再去你已经去过无数次的度假村找乐子了。找一条你你从没去过的街道，把它走完。你会发现这个你感到腻味的城市结果你并没有完全体会到它的妙处。

- 旅行，而不是换个地方消遣。
去一个地方对那个地方本身心存好奇，对自己这趟行程心存美意，感受自己经验范围以外的人生样貌。而不是坐了5小时飞机，只是换个地方打麻将，换个地方游泳，换个地方打球。从这个周末起学习一项新的技艺，比如弹电子琴，打鼓……每周末练习1小时以上。

- 去社交。
不要以为它总是令人疲惫的。虽然和看书比起来，它稍有点令人紧张，但也能让你更兴奋，更有认同感。你必须每周有两三天是和工作圈子和亲戚外的人打交道。它让你在朝九晚五的机械运行中不至失去活泼的天性。女性朋友们尤为需要走出去和朋友聚会，这些时刻你不再是满脸写着“效率”的中性人，而是一个裙裾飞扬的魅力焦点。

- 做点困难的事，如果你是精神超级紧张的人。
心理学家发现解除神经紧张的方法，是去处理需要神经紧张才能解决的问题。曾经一位精神即将崩溃的总经理找到一位医师给出治疗建议，结果他得到的处方是去动物园当驯狮师。一个月以后完全康复。所以压力特别大的时候你可以为自己再找分工作，但不要是和你职业类似的。比如去孤儿院做义工，或者去一个复杂的机械工厂从学徒干起，或者做一道超级复杂的数学题。

### 享受无聊

传统的教育告诫我们“无聊”是一种消极的情绪，一个奋发向上的人绝对不该有这种情绪，甚至不应该留给自己产生这种情绪的机会。

背负了太多的责任，于是我们活得好累，冠冕堂皇的说压力来自外界，但我觉得更多的压力是我们自找，因为在这个充满压力的社会我们没有学会给自己减压。

看看那些静静躺在海滩休假的人们，我们应该懂得无聊是一种难得的境界，或许比兢兢业业、勤勤恳恳的工作更难得。因为它需要你有好的心态、长远的眼光，要先接受它，让自己的心静下来，然后你才会真正的享受它。它绝不是一种颓废，它是一种休整、一种积蓄，它会让我们戒除“只会工作”的毒瘾。

很早以前就有人告诉过我们：不会休息的人就不会工作。可我们由于功利的原因，早已将这一说法忘记。于是我们忙碌，我们努力，于是也就害怕无聊、害怕无事可做，甚至会因为闲暇而几乎惶惶不可终日。

工作不应该成为生活的全部，工作只是为了更好的生活。我们应该是工作的主人，绝不是工作的奴隶。千万不要以为无聊是消极、是不敬业。

所以忙碌的人们应该去学会享受生活、去习惯感受无聊，习惯这一种新奇的美妙的感受！悠哉乐哉！

如何有效休息

本书英文名《Learn more study less》。关于这本书，围绕着一个主题 —— 整体学习法。强调在学习过程中，需要通过比喻和抽象的方法，将新知识与旧知识相互联系，以提高学习效率和深度的学习方法。豆瓣评分：⭐️⭐️⭐️⭐️



## 第一部分：整体性学习策略

这部分讲了两点：知识的结构和整体学习法的学习顺序。

这一部分可以看作介绍了关于整体性学习的一整套规则和目标。

### 什么是整体性学习

- 机械记忆
  - 通过不断地重复来记忆信息
- 整体性学习
  - 与机械记忆相反
  - 需要采取多种途径综合学习，让知识之间产生关联
  - 学习知识不是整理盒子，而是编制一张大网
  - 目前还是一门假说，缺少的是科学证据，更多的是实践总结。

整体性学习基于三种主要观点：

- 结构
  - 结构就是一系列紧密联系的知识
  - 在各种知识间建立尽可能多的联系，从整体上把握，相当于知识地图
  - 几个典型的成熟的结构：
    - 感知结构：图像、声音、触感、情感
    - 关系结构（人物，关系，联系）
    - 基础数学结构
- 模型
  - 简化的结构，只包括核心概念和关键思想且互相联系在一起，方便记忆和快速学习
  - 模型可以有多种形式，但目标只有一个，那就是压缩信息，只保留核心概念
  - 作者举例：编程中的变量，可以认为是罐子，不同的罐子装不同的东西
  - 我认为作者的举例可能不太恰当，这个例子更像是使用“隐喻”的手法来理解未知的事物。
- 高速公路
  - 结构与结构之间的联系。可以激发创造力，使学习更有弹性，不死板。

### 整体性学习的顺序

整体性学习的顺序并不是一成不变的线性顺序，步骤之间可以往返，也可以跳跃。而且是多线性而不是单线性。

1. 获取
   - 指信息从采集进入到大脑的过程。
   - 三个主要目标：
   - 简化/准确：将无用的东西尽量删除，只有那些对于形成模型有帮助的例子才需要认真学习。
   - 容量：尽可能获得更多的信息。
   - 速度：尽可能提高获取信息的速度。
2. 理解（明白）
   - 不能指停留在信息的表面意思，还要了解信息是如何得来的，与其它信息的关系。
3. 拓展（探究）
   - 利用模型来建设和扩展你的知识结构，将这个信息与其他信息联系起来。
   - 三种主要方式：
   - 深度拓展（知识背景探究）：在信息内部创造联系。
   - 横向拓展（类似知识探究）：与此类似的结论有哪些？那些地方类似？那些地方不同？
   - 纵向拓展（创造性探究）：在结构间建立高速通道，联系不同知识体系。比喻法和内在化是进行纵向拓展的最好方法。
4. 纠错（调试）
   - 纠错可以看作在整体性知识网络中做修剪工作，添加一些特殊的例子，删除一些现实中不存在的联系。
   - 这不是一个完美的过程，修剪工作是必要的。
5. 应用
   - 应用是学习的最终目的，能做到学以致用方能更好地适应现实世界。
   - 对概念不仅仅停留在理解上，而是要形成一种感觉。

**测试**

- 五个阶段都要进行测试，测试可以让你了解弱点是什么，该如何改进它。
- 获取：我以前看过或听过这个知识吗？
- 理解：我理解知识的含义吗？
- 拓展：我知道知识从何而来，与哪些知识有关系吗？
- 纠错：我删除了那些不恰当的联系吗？我删除了那些错误结论吗？
- 应用：我将知识用到实际生活中了吗？

**找出薄弱环节**

明确弱点何在应是一项经常性的工作。

1. 获取 ── 养成良好的学习，阅读和记笔记的习惯。
2. 理解 ── 放慢阅读速度，寻找不同的说法。
3. 拓展 ── 提高灵活性，做到举一反三，触类旁通。
4. 纠错 ── 对建立的联系做足够严谨的检查。
5. 应用 ── 抛开书本，做实验，接触生活。

### 信息结构

不同的知识有不同的结构类型。虽然学习的过程是类似的，但是知识结构的类型却不一样。

针对不同的信息，用不同的方法来处理，作者把信息结构类型大概分为五类。这五类信息基本上涵盖了学校里的课程和实际生活中能遇到的所有信息类型，大多数学科都是各种信息类型的组合，不过是比例不同。

- 随意信息
  - 容易理解，但缺少逻辑，零散。
  - 不容易进行整体学习，尽量去发现逻辑关系，可能需要反复机械式记忆
  - 联想法、挂钩法和压缩法（后面有展开讲）
- 观点信息
  - 存在争论的信息
  - 难于获取，需要检查大量信息进行对比，寻找其中的模式，而不是记忆细节
  - 速读，图示法
- 过程信息
  - 讲述一系列动作，操作的信息
  - 不断练习、重复动作；建立正确的背景概念
  - 最大难点是需要实际投入大量的时间用于练习
  - 你可以对概念理解的不好，但是你必须掌握动作要领
  - 如果你练习了，会比其他类型的信息记得更牢，时间更长
- 具体信息
  - 实际生活中可以观察到，听到，接触到的信息
  - 实际上，大多数信息都介于抽象和具体之间
- 抽象信息：难以理解，但是逻辑性很强，需要抽象思维理解的信息。
  - 缺少与感官的直接联系
  - 与随意信息正好相反，难以理解，逻辑性强；理解和拓展阶段耗时较长
  - 假如你感到理解困难，可以降低接受信息的速度，将前面的信息深入仔细地探究。这种知识的特点是一环接着一环，所以打好基础至关重要。
  - 内在化、比喻法、模型纠错

## 第二部分：整体性学习技术

这部分是结合整体学习法策略的实战。依据第一部分整体学习法的流程，逐步展开。

### 获取知识

要能够迅速的获取知识。有三个目标：简化信息，提升容量，加快速度。

作者提供了以下方法：

**快速阅读**

- 指读：就是用手指着文字，眼睛跟着手指走，可以提高注意力。
  - 因为人的眼镜在看书时是跳跃性的，不是连续的，指读法可以使眼神更连续，且容易聚焦，效率更高
- 练习阅读：主要是设定一个时长，阅读完之后合上书迅速回忆记下要点。然后打开书确认。这样可以快速回顾并记忆。
- 积极阅读：就是带着问题阅读，主要是三个问题：
  - 一段文章的主要观点？
  - 如何记忆这些观点？
  - 如何拓展及应用这些观点？

**笔记流**

类似于线性思维导图。
  - 首先写下主要的观点、信息
  - 尽量用很短的单词来替换完整的句子
  - 观点和观点之间划上一些箭头，呈现出相互关联的关系
  - 虽然不好看，但很有助于理解

### 联系观点（理解、拓展）

在获得知识之后，仅仅理解知识的表面意思一般是记不牢的，我们需要利用技巧理解和拓展这些知识。

作者同样提供了三种方法，比喻、内在化及图表，可以有选择的使用。

**知识分类**

- 困难信息
  - 日期/步骤/抽象/随意，没有逻辑
  - 联想法，相似的内容，建立记忆联系
- 关键信息
  - 练习！练习！练习！

**使用比喻**

- 确定信息，
- 在你的个人经验中寻找与信息部分相似的东西，
- 重复上述过程，检查比喻不恰当的地方。

**比喻的技巧**

- 要有寻找比喻的欲望，
- 注意出现在脑海里的第一个念头，
- 不断的反思优化。

**内在化**

- 这一步可以理解为，为寻找知识留下更多的线索；就是将信息由你不熟悉的类型转化为你容易理解和联系的类型
- 调动自身更多的感知与知识联系在一起，例如情感，图像、气味等记忆。
- 图表：一图胜千言。流程图、概念图和图像。最好和比喻等结合起来内在化。
- 赋予知识以情感，不同的情感状态会影响记忆的效果。将知识与情感相联系更容易记得住。

**怎样进行内在化**

1. 明确你要内在化的概念。是一个生物过程，还是编程中的函数或者是一个数学概念？
2. 在脑海中建立缩略图；
3. 让图像动起来，就仿佛在看一部电影一样；
4. 动用你身体的所有感官，将所有的感觉与运动的图像相联系；
5. 加入更多的感觉或情感；
6. 不断重复和优化图像，直到你一想到它就能很快回忆起知识。

**图表法**

- 流程图
  - 一系列的步骤；
  - 历史事件；
  - 一个系统。
- 概念图：观点之间的内在关系。从最重要的观点出发，不断发出分支细化知识及分解观点。
- 简图：用粗糙简单的涂鸦来代替文字，包括观点和观点之间的联系。

### 随意信息的处理

1. 联想：构造知识间的顺序，给清单中设置符号，创建自己的联想
2. 挂钩：编故事，通过一条信息联想其他信息
3. 压缩：比如通过缩写记忆全程，比如：FBI
4. 笔记压缩：找一张大一点的纸，把所有的笔记重新回忆整理到一起

### 知识拓展

**实际应用**

通过将知识应用于实际，知识就会记得更牢。作者以本书的写作出版举例：

1. 统计学 - 利用统计学知识给本书起名字以及定价。利用 google 搜索引擎尝试各种名字和价格，最终利用统计学决定了书名和价格
2. 计算机 - 除了编程这种明显的应用之外，计算机科学是寻找问题的有用途径。纠错，算法都是可以借鉴到其他地方的有用技巧。
3. 会计学 - 会计学能帮助我理清个人财务以及报税。运用基本的会计学原理整理我的个人财务，使它们看起来一目了然。
4. 经济学 - 教会我重新看待金钱在社会中的价值，明白了金钱仅仅是物质交换的载体后，我的个人哲学体系也随之发生了变化。
5. 历史学 - 历史是了解现在的工具，通过学习古代亚洲史能帮助我们看清现代中国印度和日本的种种问题。

**模型纠错（迭代）**

- 不断地练习和实践，在实践中发现问题，纠正错误。（不断试错）
- 假如整体性学习过程完成得非常好，纠错花的时间就少。
- 完美无缺是不可能的，因此不断练习，不断纠错总是个好办法。

**以项目为基础的学习**

- 设定一个需要1～3个月达成的目标，达成目标的过程就是学习的过程
- 例如：做一个编程的项目、写一篇探讨性的历史文章、对几家公司的财报做一个分析等等
- 从小项目开始、记录过程、创造一个有意义的目标

### 费曼技巧-用教的方式学

1. 选择一个概念。
2. 试着以一个老师的身份去教会别人。（多感官刺激，多角度学习）
3. 碰到难题感到疑惑时，返回去学习。
4. 简单化和应用比喻，尽量用简单直白的语言表述。

## 第三部分：超越整体学习法

### 成为高效率的学生

**能量管理**

- 增加你的能量储备
  - 坚持运动
  - 充足的睡眠
  - 多吃粗纤维，粗加工的食物
  - 多喝水
  - 少吃多餐
- 将日程表由线性的改为循环式的
  - 一周休息一天
  - 工作在白天集中完成
  - 设定 90 分钟集中完成某任务；属于大块时间，且不容易分散精力

**不要“学习”（no study）**

- 加引号的“学习”是指被误解的学习。
- 学习不是指坐在书桌前 12 个小时，也不是指每天坚持看书。这些是学习的表象，不是学习的实质。
- 真正的学习就好比整个食物经过咀嚼、消化、吸收的过程，它不是表面看起来“吃”的动作。人们不可能永远吃个不停，所以学习也不是坐在书桌前越长越好，学习需要挑选要吃的食物（获取信息）、咀嚼（明白阶段）、消化（理解阶段）、吸收（应用阶段）。

**绝不拖延**

- 周/日目标体系
  1. 每周周末，列一个清单，包括所有的任务、作业以及你想在下周完成的读书和学习活动。
  2. 每天晚上，检查周计划，列出每日目标清单。
- 有什么好处？
  - 可以缓解你作决策的应激。你只需检查清单，就明白是否完成。
  - 防止你做一项大任务时耽搁不前，依赖每周和每日目标清单，而不是截止日期，你会有时间紧迫感。
  - 帮助分配你的工作量。通过制订计划，你可以将工作适当分配到周和日，不需要冲刺，你可以细分工作。

**批处理**

- 批处理的意思就是将那些类似的、散在的工作集中起来一次做完。批处理有助于节省时间，因为你可以集中时间和精力。
- 批处理的使用技巧：
  - 最适用于处理零散工作，三小时以内可以完成的事情。
  - 一鼓作气，一次性完成，因为每次进入状态需要花费时间。
  - 提髙注意力阈值。注意力阈值就是指集中完成某项工作的最长时间，超过这个时间，注意力就急剧下降。通过不断接受越来越多的批处理，你可以逐渐提高你的注意力阈值。阈值越高，工作完成的效率也就越高。

**有组织**

- 所有的物品都放在固定的位置/区域。没有固定地方的结果就是混乱，会降低效率。
- 随身携带一个记事本。每天随时记录，日积月累，必有所获。
- 坚持日历和做事清单。应用做事清单记录任务和目标，使用日历来记录要做的事和截止日期。

### 自我教育

讲述了养成良好的学习习惯和学习方法，需要坚持。

（全书完）

如何高效学习

利用 CSS 实现单行文本省略号、多行文本省略号。



## 单行省略号

**核心代码**

Firefox 从 7.0 开始兼容`text-overflow:ellipsis;`这样的话，以后单行的省略号就可以不借助后台程序或者 js 来做到浏览器兼容了，其核心代码为：

```css
selector{
    -o-text-overflow: ellipsis;  /*兼容 opera*/
    text-overflow: ellipsis;  /*这就是省略号喽*/
    overflow: hidden;  /*设置超过的隐藏*/
    white-space: nowrap;  /*设置不折行*/
    width:200px;  /*设置宽度*/
}
```

**Demo**

```html


<ul id="demo1">
    <li>单行文本省略号</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus.</li>
</ul>
```
```css
/* CSS */

#demo1 li {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 250px;

    margin-left: 12px;
    list-style: disc inside none;
}
```

> 注：因为设置了 li 的`overflow`为`hidden`，所以如果要设置其`list-style`，则需要设置为`inside`，而不是`outside`，不然将会看不见你设置的`list-style`效果

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/99edb352/shengluehao4.png" style="max-height: 300px">

## 多行省略号

### WebKit 内核浏览器

**核心代码**

```css
.xxx {
    display:-webkit-box;
    -webkit-line-clamp:2;  /*行数*/
    -webkit-box-orient:vertical;
    overflow:hidden;
}
```

> 注：chrome 和移动端可用

**Demo**

```html
<-- HTML -->

<p class="demo2">
    static：对象遵循常规流。top，right，bottom，left 等属性不会被应用。（CSS3）* CSS3 新增属性可能存在描述错误及变更，仅供参考，持续更新
</p>
```
```css
.demo2 {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
```

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/99edb352/shengluehao2.png" style="max-height: 300px">

---

### 其他浏览器

目前没有什么 CSS 的属性可以直接控制多行文本的省略显示，比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号了，代码参考下面：

```css
.demo2 {
    position: relative;
    line-height: 1.5em;
    /* 高度为需要显示的行数*行高，比如这里我们显示两行，则为 3 */
    height: 3em;
    overflow: hidden;
}

.demo2:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 5px;
    background-color: #fff;
}
```

<img src="https://picgo-1254029119.cos.ap-beijing.myqcloud.com/blog/images/99edb352/shengluehao3.png" style="max-height: 300px">