如何用帖子电饭煲制作竖排歌词
<style>.showBox { font-size: 18px; font-family: '微软雅黑'; }
.showBox p { margin: 10px 0; }
.showBox code, .showBox pre { background: #eee; padding: 2px 6px; tab-size: 4; }
.showBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.showBox pre code { padding: 0; background: none; }
.showBox blockquote { border-left: 3px solid #87cefa; }
.showBox table { border-collapse: collapse; white-space: pre-wrap; box-sizing: border-box; }
.showBox th, .showBox td { padding: 8px 10px; border: 1px solid #999; }
.showBox tr:firstChild { text-align: center; }
</style>
<div class="showBox">
<p>帖子电饭煲不直接支持竖排LRC歌词设置，要轻松实现歌词竖排，需要两个知识储备：</p>
<h2>1️⃣CSS如何实现文本竖排</h2>
<p>
核心是
<code>writing-mode</code>
属性，值设为
<code>vertical-rl</code>
或
<code>vertical-lr</code>
就可以实现文本竖排，其中的 vertical 意为“垂直”，r 为“right 右”、l 为“left 左”之意，rl 表示自右向左、lr 是自左向右排列多行文本。另有
<code>text-orientation</code>
属性可以用了精确设置字符方向，值有
<code>upright</code>
（直立）、
<code>mixed</code>
（默认，西文平躺）和
<code>sideways</code>
（字符侧向排列）可选。
</p>
<p>
如此，仅需设法设置
<code>writing-mode</code>
属性，需要时，辅以
<code>text-orientation</code>
属性控制字符方向即可实现歌词竖排。
</p>
<h2>2️⃣了解配套CSS文档LRC歌词标签的相关变量</h2>
<p>
这里所讨论的
<code>.lrc {}</code>
选择器都基于与歌词排版相关的内容。
</p>
<p>
第一个是
<code>--rect: 0 100% 0 0;</code>
，它用来设定歌词同步的走向，四个值分别指向“上右下左”分量，歌词同步默认走向是从左到右，所有右边分量值设为 100%，那么，竖排歌词应从上到下的同步走向，下分量值即第三个值设为100%、其余的设置为 0 就好。
第二个是
<code>--border: 0 0 1px 0;</code>
，这是边框设置，不想要同步边框设为
<code>--border: 0;</code>
即可，想要的话，也是按照“上右下左”的次序设置
<code>1px</code>
的位置，想要粗一点的1改为2或3都行。
</p>
<p>如果启用歌词淡入效果，那么，不用去管上面的两个CSS变量，不需要，只需简单设置歌词竖排就可以了。</p>
<h2>❓在哪儿加入上述设置</h2>
<p>以下方法任选其一（不要重复操作）：</p>
<p>第一种：在电饭煲的LRC歌词子页面。在“定位+其它设置”小文本框添加如下代码（可根据实际需要进行增删，原有的其它代码保留）：</p>
<p>
<code>writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0;</code>
</p>
<p>第二种：在“帖子容器”子页面添加 .lrc 选择器：</p>
<p>
<code>.lrc { writing-mode: vertical-rl; text-orientation: upright; --rect: 0 0 100% 0; --border: 0; }</code>
</p>
<p>第三种：在生成的帖子代码子页面将上述代码添加到合适的地方。这个操作需要一点阅读和操作代码的能力，零代码基础的朋友也可以尝试，试几次就会了，尝试的方法是先通过子页面设置完成相关功能，然后切换到代码页面观察、研究，看看子页面的设置被组织成什么代码、放在什么地方。</p>
<p>【说明】本文所介绍的竖排歌词设置方法，均适用于帖子电饭煲 ES 版、高能版。</p>
</div> 演示帖：外滩十八号 - 音乐沙龙 - 花潮论坛 - Powered by Discuz!
黑黑老师正是及时雨啊，我是想根据帖子画面把歌词制作竖排，这下有代码了。谢谢！{:4_187:} “以下方法任选其一（不要重复操作）”
这个提醒非常重要，讲解十分细致，辛苦黑黑{:4_187:} 百花齐放用在马老师的教程中恰如其分，我一上午没上来就是又一朵绽放的灿烂！！这个需要抱走的，谢谢马老师
霜染枫丹 发表于 2026-2-26 14:20
百花齐放用在马老师的教程中恰如其分，我一上午没上来就是又一朵绽放的灿烂！！这个需要抱走的，谢谢马老师 ...
{:4_191:} 红影 发表于 2026-2-26 13:58
“以下方法任选其一（不要重复操作）”
这个提醒非常重要，讲解十分细致，辛苦黑黑
不过重复也没啥。就像很特例的，有的人觉得一条腰带不够安全，要用两条。 梦江南 发表于 2026-2-26 13:49
黑黑老师正是及时雨啊，我是想根据帖子画面把歌词制作竖排，这下有代码了。谢谢！
提醒一下：俺不姓宋 马黑黑 发表于 2026-2-26 16:49
提醒一下：俺不姓宋
黑黑老师，这个及时雨不是水浒里的宋江啊！是春天的及时雨，春雨贵如金哪！ 梦江南 发表于 2026-2-26 20:00
黑黑老师，这个及时雨不是水浒里的宋江啊！是春天的及时雨，春雨贵如金哪！
现在金价都下跌了 讲授深入浅出，通俗易懂，谢谢马老师的利他之举{:4_176:} 马黑黑 发表于 2026-2-26 20:27
现在金价都下跌了
昨天还在涨呢。{:4_173:} 梦江南 发表于 2026-2-26 20:32
昨天还在涨呢。
今天跌了 杨帆 发表于 2026-2-26 20:31
讲授深入浅出，通俗易懂，谢谢马老师的利他之举
{:4_190:} 非常及时的一个教程，小辣椒现在去修改一下，马上可以发了 小辣椒 发表于 2026-2-26 20:45
非常及时的一个教程，小辣椒现在去修改一下，马上可以发了
{:4_190:}
页:
[1]