css 小案例 文字超出 ... 显示、导航鼠标移入变色、鼠标移入图片放大、-webkit-overflow-scrolling : touch、单行文本 两端对齐

记录一下工作中常用的css 小案例吧。。

1. 实现文字超出 … 显示

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

/* 多行： */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

借鉴于：https://www.cnblogs.com/gopark/p/8875655.html
 

2. 导航鼠标移入变色
添加动画效果，不再那么死板的直接变色

a:hover {
  color: #fff;
  background: #ff4242;
  transition: background .2s, color .2s ease-in;
}

 
3.鼠标移入图片放大

.imgbox {
  width: 100%;
  height: 100%;
}

.imgbox:hover img {
  transform: scale(1.05);
}

.imgbox img {
  width: 100%;
  height: 100%;
  transition: all 0.5s
}

 
4.overflow:scroll
设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿;

解决办法：
在这个div上加一个css:
-webkit-overflow-scrolling : touch;

在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素，随着页面一起滚动，只有滚动停止时才会恢复原位。如果不用这个属性的话，使用overflow-y:属性的盒子滑动非常不流畅，

解决办法：
使用overflow-y属性的元素不应该和固定元素在一个层级，使用overflow-y属性的元素外面加一层和固定元素在同一层级可以解决该问题…

 
5.单行文本 两端对齐实现方法：

text-align-last:justify