背景
HullQin 在参与创作者打榜，点击这里帮我投票吧！
最近我在创作者打榜活动中，发现了掘金活动页面一个样式问题，如图：
可以看到，用户手机设定了默认的字体，而前端程序员没有测试到这种「宽」字体，导致换行了。
当然，这个截图是在安卓APP里发生的，其实在网页开发中，也会遇到这种情况。其中最容易复现的办法就是：你在微信打开一个网站，点右上角「…」，调整字体，拖动到最大：
你就会发现，一些指定了 width 的按钮，如果大字号下文案宽度超出了按钮的 width，就会换行，影响样式。
解决方案
- 通常，按钮里的文案用一行展示就够了。所以我们用
white-space: nowrap;，保证文案不会换行。 - 如果文案确实太长，我们不希望它超出容器，就让它隐藏即可，使用
overflow: hidden;。如果你不希望隐藏，就不用加，这样即使超出容器，也能看清按钮的文案。 - 如果文案太长，是否需要展示最后的省略号「...」呢？如果需要，可以加上
text-overflow: ellipsis;，如果不需要，就不加，这样可能可以多展示一些信息，用户通过遮挡也大概知道是没展示完。 - 通常，我们设定Button时，可以设置一个比较大的 width，保证内部文案字体稍微放大一点后 也能展示完整，这是比较明智的做法。因为我们无法预判用户装了什么字体、用的什么微信字号。
.btn {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
如果你想进一步适配微信大字号，欢迎阅读：《让你的网页，适配微信大字号模式》
关于 text-overflow
常见的 text-overflow 的值是 ellipsis，表示文字太长时，最后展示...。
text-overflow 的默认值是 clip，表示文字太长时，直接截断。
还有其他值，但是实验特性，例如可以自定义省略符号、可以定义用渐变透明来表达省略等。参考：developer.mozilla.org/en-US/docs/…
兼容性实在是太差了，所以我就不详述了。
写在最后
我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、象棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。
