旋转、跳跃、我不停歇：关于CSS writing-mode 的一场排版奇幻漂流 最近，我迷上了一项有点冷门，但潜力无限的 CSS 属性：writing-mode。 乍一听，你可能会觉得这不过是另一个枯燥的技术术语，但在我看来，它更像是一把开启排版新世界大门的钥匙。就像爱丽丝掉进了兔子洞，我一头扎进了 writing-mode 的世界，体验了一场充满惊喜、困惑和最终顿悟的排版奇幻漂流。 最初，我对 writing-mode 的理解仅仅停留在“让文字竖着显示”的层面。 就像小时候，我们偷偷把妈妈的化妆品拿出来乱涂乱抹，以为自己就能变成仙女一样，我也天真地以为，只要简单地把 writing-mode 设置为 vertical-rl 或 vertical-lr，就能立刻做出充满古风韵味的垂直排版。 然而，现实给了我当头一棒。文字确实竖起来了，但整个页面也跟着“翻了个儿”，各种元素的位置都变得奇奇怪怪，简直像刚经历了一场地震。 我这才意识到，writing-mode 远不止是将文字简单地旋转90度那么简单，它改变的是整个文档的流动方向，影响的是元素的定位、布局和渲染。 这就像学习一门新的语言，光 …
`hyphens` 属性：实现文本自动断字与排版优化
拯救文本于“挤成一团”：关于 CSS hyphens 属性的碎碎念 最近，我沉迷于 CSS 的一个小小属性，它不起眼，很少被提及，却拥有着化腐朽为神奇的力量——hyphens。一开始，我甚至不知道它的存在，直到有一天，我被一段挤成一团，毫无美感的文字狠狠地伤害了眼睛。那段文字就像一群参加挤地铁大赛的文字，拼命地想要塞进狭小的容器里，结果就是彼此推搡，面目狰狞。 于是，我开始寻找拯救之道。Google 大神告诉我，hyphens 或许能帮到我。抱着死马当活马医的心态，我尝试了一下。然后，奇迹发生了！那些原本挤成一团的文字，竟然优雅地舒展开来，就像参加完瑜伽课一样，身姿曼妙，呼吸顺畅。 那一刻，我感觉自己发现了一个新大陆，一个属于精致排版的新世界。 hyphens，顾名思义，就是控制文本在容器边缘自动断字的属性。它可以有三个值：none、manual 和 auto。none 是默认值，意味着不进行断字。manual 允许你通过软连字符（­）来手动控制断字的位置。而 auto，则是本文的主角，它让浏览器自动决定在哪里断字。 你可能会说：“断字而已，有什么大不了的？不就是加个连 …