Post #172

最近学到的一些 CSS 技巧，基本都是从 Tailwind 学到的，见笑了： - 谁还没学过 flex 的话一定要看看[1]，这个不是最近学到的，但太简单好用了，值得强调一下。 - text-wrap: pretty; 避免最后一行只有一个字。 - overflow-wrap: break-word; 在单词中间换行来避免溢出。 - hyphens: auto; 按照 lang 属性时自动插入连字符。 - text-overflow: ellipsis; 溢出时显示省略号。 - font-variant-numeric: tabular-nums; 等宽数字。 - scroll-behavior: smooth; 点击页内跳转链接或 element.scrollIntoView() 都用平滑滚动。 - scroll-margin-top: 10px; 滚动到这个元素时，在它上方留 10px。 - scroll-padding-top: 10px; 滚动到内部的元素时，上方要留 10px。 - CSS 现在可以帮我决定把一个悬浮元素放在另一个元素的上下左右哪一侧，避免伸到窗口外面去[2]！可以用来实现右键菜单或者鼠标悬浮时显示的说明。真可惜这个特性是今年刚刚实现的，太新了。 - 浏览器原生支持根据语言生成正确的引号，以及正确实现双引号单引号交替？！用 <q>，对引号和交替规则不满意的话可以用 CSS 改。 - inset 是 top left bottom right 的缩写。 [1]: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning/Try_options_hiding