如何将 CSS 样式设置为字符的一半？

CSS 样式可以设置为垂直一半或水平一半的字符。在文本上添加一个类，该类包含 CSS 样式以应用一半字符。主要文本的可访问性由盲人或视障者的屏幕阅读器保留。

您需要执行以下操作才能将 CSS 应用于半个字符：

• 设置半个字符或字母样式的过程。
• 使用 CSS/JavaScript 设置字符部分样式的过程。
• 将 CSS 应用于 50%字符的过程
• 您只需要将类 .halfStyled 应用于每个元素，其中包含您想要半样式的字符。

有两种流行的方式来设置字符的一半。

• 使用 HTML 和 CSS
• 使用 HTM、CSS 和 jQuery

示例 1：此示例使用 HTML 和 CSS 来设置字符的一半样式。

  

    
    

  

    
        G
        e
        e
        k
        s
        f
        o
        r
        g
        e
        e
        k
        s
        
A Computer Science Portal for Geeks
    

  

输出：

示例 2：此示例使用 HTML、CSS 和 jQuery 设置字符的一半样式。

      

    Half Styling Character
      
    
    
      
    
        .halfStyled {
            position: relative;
            display: inline-block;
            font-size: 80px;
            color: black; 
            overflow: hidden;
            white-space: pre; 
        }
   
        .halfStyled:before {
            display: block;
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            content: attr(data-content); 
            overflow: hidden;
            color: green;
        }
        body {
            text-align: center;
        }
    

  

    GeeksforGeeks
      
    A Computer Science Portal for Geeks
       
    
        jQuery(function($) {
            var text, chars, $el, i, output;
           
            // Iterate over all class occurences
            $('.geeks').each(function(idx, el) {
                $el = $(el);
                text = $el.text();
                chars = text.split('');
               
                // Set the screen-reader text
                $el.html('<span style="position: absolute !important;'+
                        'clip: rect(1px 1px 1px 1px);' +
                        'clip: rect(1px, 1px, 1px, 1px);">'
                        + text + '</span>');
               
                // Reset output for appending
                output = '';
               
                // Iterate over all chars in the text
                for (i = 0; i < chars.length; i++) {
                      
                    // Create a styled element for each character
                    // and append to container
                    output += '<span aria-hidden="true" class="halfStyled"'
                            + 'data-content="' + chars[i] + '">' 
                            + chars[i] + '</span>';
                }
               
                // Write to DOM only once
                $el.append(output);
            });
        });
    

  

输出：