页面展示

处理文本超长

假设这里有一行文字

<div class="text">一二三四五六七八九十十一</div>

产品说：最多显示 10 个字符，超出部分显示 ...

问：这句话合理吗？

一般来说，我们会给它加如下样式

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

width...10 个字符咋整？不论用 px 或者 rem 都无法避免中英文数字混排的情况，锁定 10 个字符。。。大概不太行。。

所以正确做法✅：告诉产品，定宽，多少 px，而不是字符。齐活儿~

img 保持宽高比剪裁

以往遇到图片，都会直接写成 background-image，因为定宽之后有 background-size: cover 可以保持比例剪裁。那能不能直接用图片呢？答案是，可。下面放一下二者对比

.img-image {
  width: 100px;
  height: 100px;
  object-fit: cover; 
  object-position: 50% 100%;
}
.div-image {
  width: 100px;
  height: 100px;
  background-image: url('xxxxxx');
  background-size: cover; 
  background-position: 50% 100%;
}

用 img 标签的话，就有下面图片加载失败的应对了，岂不是比简单用 background 来的香？（只是放在 img 里的话似乎无法将图片打包成雪碧图

图片加载失败

<img src="test.png" alt="图片描述" onerror="this.classList.add('error');">

这样就可以对 img.error 做一些处理了。

交互优化

扩大按钮可交互区域

::before 或 ::after 可以在不增加多余 dom 元素或改变原本按钮大小的情况下扩大可交互区域。

禁止多次点击元素选中元素内文字

明明只是个按钮（甚至是 div），但点击多次居然可以选中内部文字。解决方法✅：为按钮添加样式 user-select: none

css 禁止鼠标事件

比如给 a 标签加了 pointer-events:none;，就不会跳转了（甚至鼠标放上去也没有 pointer 效果）

<a style="pointer-events:none;" href="https://code.juejin.cn/" target="_blank">点我一下呗~</a>

同理，它也可以用于加了 onClick 事件的某些元素的特殊处理。

关于字体

尽量使用默认字体，西文在前，中文在后。如果必须使用字体包，可以看看文字是否确定，如果确定的话可以用 fontmin 压缩一下。

参考：《前端优秀实践不完全指南》

虽然需求文档里没写，但做了一定会被产品夸夸的事 | 青训营笔记