CSS少见问题集

写在最前面

　　前端开发经常与css打交道，本人在过往的开发过程中遇到了许多CSS相关的奇奇怪怪的问题，本篇随笔用于（持续）记录遇到的问题及解决办法。

　　本随笔仅仅针对某一些问题或需求的个人经验记录，不适合被用于学习。并且由于汇总了各种奇奇怪怪有趣的经验，本篇也不适合被用于检索&解决问题因为内容杂乱，如果仅仅想在本篇中查找是否有关于某一问题的解决办法可能会耗费您大量的时间（有很大可能因为本人开发经验有限，并没有该问题的记录）。

超出指定行省略

超出指定宽度隐藏，并显示省略号。这是有过前端开发经验的朋友门都比较熟知的，通过以下代码即可实现：

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

如果要实现控制，超出指定行省略，以下是本人用过比较舒服的方式：

.text {
  width: 100px; //非必要
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;//任意要控制显示的行数
}

 鼠标移入某个指定位置屏幕出现闪烁

　　问题场景描述：在做一个购物网站的头部导航栏时，理想的UI：如果该菜单选项有子菜单选项，显示子菜单遮罩，如果没有子菜单，隐藏遮罩。然而现实是，当鼠标位于两个具有和不具有子菜单的选项中间某一位置时，遮罩会以显示、不显示的形式交替出现，给用户造成屏幕闪烁的假象。

　　UI描述：网站不是铺满整个屏幕，而是根据显示器大小范围确定一个固定的宽度，使用margin: 0 auto;来将网页横向居中。遮罩：宽高100%，有position: fixed;固定定位。

　　两个菜单选项描述：鼠标左侧的选项无子菜单，右侧的选项有子菜单。

　　问题原因：该问题出现的可能原因是：网站页面因为内容超出屏幕所以具有竖向滚动条，此时margin: 0 auto; 此auto的范围是->(页面宽度 - 滚动条宽度 - 固定宽度)/2。而当遮罩出现时，竖向滚动条消失，此时的auto范围是->(页面宽度 - 固定宽度)/2。对比两个auto的宽度不难发现，当遮罩出现前后两个auto的值不相等，所以导致固定宽度内容的位置发生改变。由于鼠标此刻正处于一个临界值，当遮罩隐藏时，位于具有子菜单的选项之上所以遮罩出现；当遮罩出现时由于auto值发生改变，导致鼠标位于没有子菜单的选项之上，所以遮罩消失...如此往复，最终造成了屏幕闪烁的假象。

　　解决办法：通过分析，问题的原因是滚动条的存在与否影响auto的值，从而导致了这一问题。为了符合实际需求及用户习惯，不能去掉滚动条，所以我们可以改变固定宽度元素的父级宽度。如下：

.wrapper {
 padding-left: calc(100vw - 100%); // 此相减结果为滚动条宽度
}
// 固定宽度元素
.wrapper .container {
 width: 1190px;
 margin: 0 auto;
 overflow-x: hidden; // 竖向滚动条显示
}

 禁用事件

曾经开发中遇到这样的需求：当用户具有某一权限的时候，页面的按钮、输入框等施以点击/输入，否则不可操作。

对于没有权限相关的配置的框架，要实现这一功能最常见的是为事件、输入框添加判断，当有权限时执行某事件/可输入，否则不行。

然而，在没有特定需求的前提下，实际上可以通过给最外层的父元素添加一个禁止事件的css属性来实现：

.container {
    pointer-events: none;
}

如果有特定需求，比如除某一个/几个仍可以点击/输入外，其他的都禁用，此时可以在进行完上述操作后，单独对解除禁用的元素添加如下属性：

.enableClick {
    pointer-events: auto;
}

关于poniter-events属性还有除none、auto以外的属性值，可参考pointer-events。