css-doodle排版各行字数不同的诗词演示
本帖最后由 马黑黑 于 2023-5-20 23:15 编辑 <br /><br /><style>.papa > p { margin: 10px 0; }
.mama { margin-left: 40px; margin-bottom: 15px; position: relative; }
.hCode, .hLineNum { padding: 10px; width: calc(100% - 40px); background: #f9f9f9; box-sizing: border-box; overflow-x: auto; tab-size: 3; position: absolute; }
.hCode { left: 40px; margin-left: -40px; padding-left: 45px; }
.hLineNum { width: 40px; background: #ccc; border-right: 1px solid #ccc; text-align: right; pointer-events: none; }
.stage { display: grid; place-items: center; }
.hidden { display: none; }
</style>
<div class="papa">
<p>南无月童鞋在使用css-doodle排版各行字数不同的诗词时，找到了几个非打印字符的占位符空格，用它来补齐字数。以下代码中的单元格伪元素选择器 :after {} 里content的文本，使用了非打印字符 <span style="color: red;">&zwj;</span> 补齐不足八个字（含标点）的词行，缺多少个补多少个，补在标点符号的后面，有特殊排版需求的计算好后可以加在其他地方（比如下例中词的一二行）。</p>
<div class="mama">
<pre class="hCode"><css-doodle grid="8x10">
:doodle {
@size: 480px 600px;
border: 1px solid tan;
gap: 1px;
}
background: gray;
color: rgb(@m3(@r(255)));
font: bold 2em sans-serif;
text-shadow: 1px 1px 2px #000;
:after {
content: @pn([&zwj;武陵春·春晚&zwj;&zwj;&zwj;[宋]李清照风住尘香花已尽，日晚倦梳头。&zwj;&zwj;物是人非事事休，欲语泪先流。&zwj;&zwj;闻说双溪春尚好，也拟泛轻舟。&zwj;&zwj;只恐双溪舴艋舟，载不动许多愁。&zwj;]);
}
</css-doodle></pre>
<pre class="hLineNum"></pre>
</div>
<p><button class="btnok" type="button" value="运行代码">运行代码</button></p>
<div class="stage"></div>
<p>【注意】content里的文本处理好后要写成一行，因为自然换行存在不可见的占位符，会直接影响最终排版效果。</p>
</div>
<script>
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let btns = document.querySelectorAll('.btnok'),
stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode'),
hLineNums = document.querySelectorAll('.hLineNum'),
mamas = document.querySelectorAll('.mama');
btns.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
hLineNums.innerText = str;
mamas.style.cssText += `height: ${hCodes.offsetHeight + 10}px`;
item.onclick = () => {
let val = item.value;
stages.innerHTML = val === '运行代码' ? hCodes.innerText : '';
item.value = item.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
});
</script>
谢谢老师的教程分享，感谢！{:4_187:} 梦缘 发表于 2023-5-21 07:15
谢谢老师的教程分享，感谢！
早 醉美水芙蓉 发表于 2023-5-21 06:20
黑黑老师这么晚还在做教程，老师辛苦了！
早上好 嗯嗯，月儿发现的这个特别好，终于可以输入宋词了{:4_187:} 红影 发表于 2023-5-21 07:43
嗯嗯，月儿发现的这个特别好，终于可以输入宋词了
现在终于理解绝句的重要：方便排版{:4_170:} 黑黑还特地把格子显示出来，这样看起来就更清楚了呢{:4_199:} 红影 发表于 2023-5-21 07:46
黑黑还特地把格子显示出来，这样看起来就更清楚了呢
这是为了直观比较。不过，如果需要方格稿子样式，可以考虑一下 {:4_199:}这个加格子的特别好，规定范围，整整齐齐 南无月 发表于 2023-5-21 08:09
这个加格子的特别好，规定范围，整整齐齐
早啊 问好！辛苦了！{:4_191:} 小文 发表于 2023-5-21 08:42
问好！辛苦了！
上午好 马黑黑 发表于 2023-5-21 07:46
现在终于理解绝句的重要：方便排版
诗都是整齐的，词和曲大都是长短句{:4_173:} 马黑黑 发表于 2023-5-21 07:47
这是为了直观比较。不过，如果需要方格稿子样式，可以考虑一下
帖子里一般用不到的，有格子倒是怪了呢{:4_173:} 马黑黑 发表于 2023-5-21 08:36
早啊
不早了。。碗上好 南无月 发表于 2023-5-21 18:16
不早了。。碗上好
盆里也好 红影 发表于 2023-5-21 13:17
诗都是整齐的，词和曲大都是长短句
感谢教导，有空我也修炼修炼词曲 马黑黑 发表于 2023-5-22 07:41
感谢教导，有空我也修炼修炼词曲
玩玩就好，修炼两字用得严重了{:4_187:} 红影 发表于 2023-5-22 18:34
玩玩就好，修炼两字用得严重了
按你的逻辑，一切皆修炼的{:4_170:}