新闻标题展示背后的CSS技术

       在我们浏览网页的时候，常常会看到许多头条或者新闻的标题末尾常常带有半个省略号，也就是三个点，然后你把鼠标移到标题上去的时候，标题颜色会变，当然这不是今天的重点，用伪类选择器实现即可。还有一个现象就是鼠标小手下面通常会弹出一段话，而这段话往往比标题多那么几个字，这应该就是完整的标题，比如下图：

鼠标移上去，鼠标小手下面弹出一个文本框，因为截图之后效果会消失，就直接把弹出的文本输出：

曾为汶川灾区婴儿哺乳的护士：作为妈妈 我为自己打分“不及格“
这就是完整的标题
那么前端工程师们为啥不把标题写完整呢？

单行文本溢出处理

我想，这个应该是很好理解的，毕竟一个屏幕也就那么大，考虑展示的效果、美观、分块等因素，必然这个问题是经常遇到的。
为了探索这3点出现的原因，点开某一个显示完整的 标题，鼠标右键，选择检查

找到了这个地方的 样式设置

改变 width值，将其缩小，在缩小过程中，发现左侧网页出现改变

是的，那神奇的3个点出来了！

几番折腾，发现了那3个点的效果实现原理：
比如有个p标签里面有一段话，因为空间有限，我们只能让其部分显示，多余部分用省略号替代，如何做到？
我们设置宽高如下，为了说明问题，加个背景颜色

p{
    width: 200px;
    height: 20px;
    line-height: 20px;
    background-color: bisque;
}

效果如图，到达边界会自动换行

添加下面语句到CSS中p标签样式设置下

 white-space: nowrap; 

效果如图

可以看出，white-space:nowrap ;的作用是让其不换行，直接溢出，可以看到，出现了滑动条，然后添加语句

  overflow: hidden;

让其溢出部分不显示，效果如图：

可以看到，用字 被切割掉了大部分，滑动条也消失了，显然这种情况是不能出现在浏览器用户面前的，不然，第2天的头条就是 “某某浏览器出现惊天漏洞”之类的话题了，引发一系列后果，此时，再添加语句：

p{
    width: 200px;
    height: 20px;
    line-height: 20px;
    /*让其直接溢出*/
    white-space: nowrap; 
    /*溢出部分不显示*/
    overflow: hidden;
    /*末尾展示3个点*/
    text-overflow: ellipsis;
}

就可以完美地展示出省略号效果了

把背景颜色去掉，就实现了这些新闻头条标题的大致效果了。

多行文本处理 有趣的百度

注意，上面的是单行的文本处理，只是我粘贴的字多了点，变成了多行，但是似乎多行的处理跟上面的处理情况是不一样的，看来试验的次数还是得多一点，请看下面的情况，搜一下偶像信息

神奇的3个点又出现了，这个肯定是多行文本了吧。那肯定不能跟上面的处理方式一样了吧，毕竟在篇幅可以满足的情况下，还是要能多提供点信息给用户，不然岂不是浪费空间？
于是，好奇它们的多行文本处理情况，点开检查

发现，这3个点怎么来的？

直接写上去的

好吧 原来是这样搞的！ 直接手写上的