其实有时候很烦躁，各种需求叠加，又要各种各样效果很难综合。
可不是吗？前段时间一直在开发前端的东西，网页上还好无非就是些各种浏览器之间的兼容适配。可最近小程序项目较紧张，又不得不抽时间搞小程序这一块。以前对于这种需求记不太牢就直接谷歌或百度了，用了就忘，忘了就再次搜索，其实仔细理一理还是蛮有意思。
看段css代码：

.sug_info{
  border-bottom: 1rpx solid #ebebeb;
  height: 90rpx;
  line-height: 90rpx;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

我在小程序控制台Wxml选项下做样式调试，末尾三行是我百度的结果，超出控件的内容显示“...”效果的代码
让我们试试一行一行取消看看啥效果
（隔了有半小时吧...）
整了好几张图，本来PS使用就不怎么6，凑合整了几张能看的图片准备上传上来的，但是呢？简书不知道怎么就抽风了，传不上来！只能口头描述一番了。
1.如果不加末尾三行，控件内容过长就会出现换行，而且会换到下一行内容内，就重叠了
2.只添加white-space: nowrap;
不换行了不假，但是内容会超出屏幕外
3.添加white-space: nowrap;overflow: hidden;
效果是：不换行，内容也不会超出屏幕外，但是没有'...'效果
4.三行都添加，效果就正常了。可见text-overflow: ellipsis;是关键点。
最后加上这段代码即可

.sug_info{
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

总结：

都是非常简单的css小知识，天天用也经常用，但是有时候觉着这也太简单了，就没有真正去深入想想每一行代码具体是干什么的。像今天这么一点一点去调去试，就会明白零零碎碎的小东西去弄清楚了也是件很开心的事儿。