Heim > Web-Frontend > js-Tutorial > Hauptteil

Kann CSS die Hälfte eines Zeichens formatieren?

Mary-Kate Olsen
Freigeben: 2024-10-31 06:54:01
Original
162 Leute haben es durchsucht

Ist es möglich, CSS auf die Hälfte eines Zeichens anzuwenden?

Problem:

Wie können wir nur eine Hälfte eines Zeichens stylen? Machen Sie zum Beispiel eine Hälfte des Buchstabens transparent.

Vorherige Versuche:

  • Suche nach Methoden, um die Hälfte eines Zeichens zu gestalten
  • Einen Teil eines Zeichens mit CSS oder JavaScript gestalten
  • CSS auf 50 % eines Zeichens anwenden

Beispiel:

Can CSS Style Half of a Character?

Lösung:

GitHub-Plugin:

https://github.com/arbel/half-style

Demo:

http://jsfiddle.net/arbel/pd9yB/1694/

Funktionen:

  • Reines CSS für einzelne Zeichen
  • JavaScript-Automatisierung über Text oder mehrere Zeichen hinweg
  • Behält die Textzugänglichkeit für Bildschirmleseprogramme bei

Grundlegende Lösung:

Einzelnes Zeichen:

Halbstil im Text

Diese Lösung verwendet reines CSS und eine Klasse namens .halfStyle.

Beliebiger Text:

Fügen Sie die Klasse .textToHalfStyle zum Element hinzu enthält den Text.

JavaScript-Automatisierung:

<code class="javascript">// jQuery for automated mode
jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').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="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
    }

    // Write to DOM only once
    $el.append(output);
  });
});</code>
Nach dem Login kopieren

CSS:

<code class="css">.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 80px; /* or any font size will work */
    color: black; /* or transparent, any color */
    overflow: hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
}

.halfStyle:before {
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow: hidden;
    color: #f00;
}</code>
Nach dem Login kopieren

Beispielverwendung :

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>Single Characters:</p>
<span class="halfStyle" data-content="X">X</span>
<span class="halfStyle" data-content="Y">Y</span>
<span class="halfStyle" data-content="Z">Z</span>
<span class="halfStyle" data-content="A">A</span>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span></code>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonKann CSS die Hälfte eines Zeichens formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!