CSS 代码片段

单行文本溢出显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出显示省略号

display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

display: -webkit-box : 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示

-webkit-box-orient : 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式

-webkit-line-clamp : 必须结合的属性 ,用来限制在一个块元素显示的文本的行数。

参考: css实现单行、多行文本溢出显示省略号(…)

针对苹果手机页面滚动不流畅的处理

-webkit-overflow-scrolling : touch;

原理: 实际上在iOS系统的手机上创建了一个UIWebOverflowScrollView,它继承自UIScrollView,使得滚动具有”橡皮筋特效”

参考: 网页在Safari快速滚动和回弹的原理: -webkit-overflow-scrolling : touch;的实现

使用 :not() 在菜单上应用/取消应用边框

一般我们会这么写,先给每一个菜单项添加边框,然后再除去最后一个元素

.nav li {
  border-right: 1px solid #666;
}
.nav li:last-child {
  border-right: none;
}

其实可以直接使用 :not() 伪类来应用元素:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

或者使用兄弟选择器:

ul>li~li {
  border-right: 1px solid #000;
}

或者:

ul>li+li {
  border-right: 1px solid #000;
}

文本两端对齐

.parent
  text-align:justify;
  text-align-last:justify;
  &::after
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;

参考资料:

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress