CSS initial-letter属性基本效果实例页面

效果：

📢日前，国务院办公厅印发《关于坚定不移推进长江十年禁渔工作的意见》。《意见》强调，各地各有关部门要切实提高政治站位，把长江十年禁渔作为当前和今后一段时期的重大政治任务，优化完善工作协调机制，加强督促推进；要加强动态精准监测，跟踪做好就业帮扶，持续落实养老保险政策，持续做好安置保障；要健全执法协作机制，强化跨区域、跨部门执法合作，保持高压严管态势，消除非法捕捞隐患，打击整治违规垂钓，加强执法能力建设，持续加强执法监管；要加强珍稀濒危物种保护，开展重要栖息地修复，加强资源调查监测，加强外来物种防治，加快推进生态修复。

值设置

占据行数(1-6)：

下沉行数(1-6)：

代码：

CSS代码：

.notice::first-letter {
    -webkit-initial-letter: var(--occupies-sinks, 2);
    initial-letter: var(--occupies-sinks, 2);
    padding-right: .5em;
}

HTML代码：

<p class="notice">
    📢日前，国务院办公厅印发《关于坚定不移推进长江十年禁渔工作的意见》。《意见》强调，...
</p>

<h4>值设置</h4>
<p>占据行数(1-6)：<input type="range" id="r1" min="1" max="6" value="2" /></p>
<p>下沉行数(1-6)：<input type="range" id="r2" min="1" max="6" value="2" /></p>

JS代码：

const notice = document.querySelector('.notice');
[r1, r2].forEach(range => {
    range.addEventListener('input', function () {
        notice.style.setProperty('--occupies-sinks', [r1.value, r2.value].join(' '));
    });
});