利用CSS断字实现德语单词音节交替着色的技术咨询

纯CSS无法自动识别并拆分德语单词的音节，需要结合JavaScript完成音节拆分后，再通过CSS实现交替着色。以下是可直接嵌入网站的完整代码，适配Chrome浏览器，也兼容大部分现代浏览器：

完整代码示例 #

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>德语音节着色练习</title>
    <style>
        #word-display {
            font-size: 40px;
            margin: 20px;
            padding: 10px;
            font-family: 'NordDruck', 'AndikaW', sans-serif;
        }
        /* 音节交替着色样式 */
        .odd-syllable {
            color: #000000; /* 黑色 */
        }
        .even-syllable {
            color: #666666; /* 深灰色，可按需调整 */
        }
        /* 保持音节间自然间距 */
        .syllable {
            margin-right: 0.1em;
        }
    </style>
</head>
<body>
    <div id="word-display">
        Willkommen zu unserem Deutsch-Lernportal! Hier lernen wir einfache Wörter mit Silben.
    </div>

    <script>
        // 基础德语音节拆分函数（基于常见规则，可按需优化）
        function splitIntoSyllables(word) {
            const vowels = /[aeiouäöüAEIOUÄÖÜ]/g;
            const vowelPositions = [];
            let match;
            while ((match = vowels.exec(word)) !== null) {
                vowelPositions.push(match.index);
            }

            const syllables = [];
            let start = 0;
            // 从第二个元音开始，确定拆分位置
            for (let i = 1; i < vowelPositions.length; i++) {
                const pos = vowelPositions[i];
                // 处理辅音组合的拆分逻辑
                if (pos - start > 1) {
                    if (word[pos-1] && word[pos-2] && !/[aeiouäöüAEIOUÄÖÜ]/.test(word[pos-1]) && !/[aeiouäöüAEIOUÄÖÜ]/.test(word[pos-2])) {
                        syllables.push(word.slice(start, pos-1));
                        start = pos-1;
                    } else {
                        syllables.push(word.slice(start, pos));
                        start = pos;
                    }
                }
            }
            syllables.push(word.slice(start));
            return syllables;
        }

        // 给文本中的音节添加交替着色
        function colorSyllables() {
            const container = document.getElementById('word-display');
            const text = container.textContent.trim();
            const words = text.split(/\s+/);

            const coloredText = words.map(word => {
                const syllables = splitIntoSyllables(word);
                return syllables.map((syllable, index) => {
                    const className = index % 2 === 0 ? 'odd-syllable' : 'even-syllable';
                    return `<span class="syllable ${className}">${syllable}</span>`;
                }).join('');
            }).join(' ');

            container.innerHTML = coloredText;
        }

        // 页面加载完成后执行着色
        window.addEventListener('load', colorSyllables);
    </script>
</body>
</html>

使用说明 #

1. 替换<div id="word-display">内的文本为你需要展示的德语内容即可。
2. 若要调整颜色，修改CSS中.odd-syllable和.even-syllable的color值就行。
3. 音节拆分逻辑基于基础德语规则，遇到特殊单词可微调splitIntoSyllables函数的规则，适配教学需求。

内容的提问来源于stack exchange，提问作者TeachersHands