https://www.huachaowang.com/forum.php?mod=viewthread&tid=90986&pid=2529253&page=1&extra=#pid2529253
帖子电饭煲不直接支持竖排LRC歌词设置，要轻松实现歌词竖排，需要两个知识储备： 1️⃣CSS如何实现文本竖排核心是 writing-mode 属性，值设为 vertical-rl 或 vertical-lr 就可以实现文本竖排，其中的 vertical 意为“垂直”，r 为“right 右”、l 为“left 左”之意，rl 表示自右向左、lr 是自左向右排列多行文本。另有 text-orientation 属性可以用了精确设置字符方向，值有 upright （直立）、 mixed （默认，西文平躺）和 sideways （字符侧向排列）可选。 如此，仅需设法设置 writing-mode 属性，需要时，辅以 text-orientation 属性控制字符方向即可实现歌词竖排。 2️⃣了解配套CSS文档LRC歌词标签的相关变量这里所讨论的 .lrc {} 选择器都基于与歌词排版相关的内容。 第一个是 --rect: 0 100% 0 0; ，它用来设定歌词同步的走向，四个值分别指向“上右下左”分量，歌词同步默认走向是从左到右，所有右边分量值设为 100%，那么，竖排歌词应从上到下的同步走向，下分量值即第三个值设为100%、其余的设置为 0 就好。 第二个是 --border: 0 0 1px 0; ，这是边框设置，不想要同步边框设为 --border: 0; 即可，想要的话，也是按照“上右下左”的次序设置 1px 的位置，想要粗一点的1改为2或3都行。 如果启用歌词淡入效果，那么，不用去管上面的两个CSS变量，不需要，只需简单设置歌词竖排就可以了。 ❓在哪儿加入上述设置以下方法任选其一（不要重复操作）： 第一种：在电饭煲的LRC歌词子页面。在“定位+其它设置”小文本框添加如下代码（可根据实际需要进行增删，原有的其它代码保留）： writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0; 第二种：在“帖子容器”子页面添加 .lrc 选择器： .lrc { writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0; } 第三种：在生成的帖子代码子页面将上述代码添加到合适的地方。这个操作需要一点阅读和操作代码的能力，零代码基础的朋友也可以尝试，试几次就会了，尝试的方法是先通过子页面设置完成相关功能，然后切换到代码页面观察、研究，看看子页面的设置被组织成什么代码、放在什么地方。 【说明】本文所介绍的竖排歌词设置方法，均适用于帖子电饭煲 ES 版、高能版。
| 
发表于