Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS3 to achieve the beautification of characters, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The basic idea of beautifying half a character by CSS

The idea is very simple, that is, write a word twice and show half of it. The train of thought is very clear and simple, but how to achieve it? Of course, you can't really write a word twice, which is stupid, and when the user copies and pastes the text, two copies of the same text will be glued out. This requires the use of CSS pseudo elements: before and: after. Remember the "pseudo" word of this "pseudo element" to indicate that it does not exist. Our method is to put the same characters in the pseudo elements, showing only half of them, while the original characters show the other half, and finally put them together into one word.

CSS code

.halfStyle {

Position:relative

Display:inline-block

Any width of font-size:80px;/* can be * /

Color:black;/* any color, or transparent * /

Overflow:hidden

White-space:pre;/* handles spaces * /

}

.halfStyle: before {

Display:block

Z-index:1

Position:absolute

Top:0

Left:0

Width:50%

Content:attr (data-content); / * dynamic acquisition of pseudo elements * /

Overflow:hidden

Color:#f00

}

HTML code

Single character

Wind

Flow

Cymbal

Suave

Use scripts to automatically beautify:

Love is easy, marriage is not easy, and do and cherish.

All you need to do is apply the .halfStyleCSS class to each character that needs to be half-beautified. In the above code example, each span contains a character, on which we put the data- attribute, such as data-content= "wind", and then we use the attr (data-content) method in the pseudo elements, so that .halfStyle: before becomes dynamic and does not require you to hard-code their contents manually.

For cases where multiple characters need to be beautified, we can create a piece of jQuery code that automatically adds this effect to all characters of the .textToHalfStyleCSS class:

JQuery (function ($) {

Vartext,chars,$el,i,output

/ / traverse all characters

$('.textToHalfStyle') .each (function (idx,el) {

$el=$ (el)

Text=$el.text ()

Chars=text.split ('')

/ / Setthescreen-readertext

$el.html ('

'To

+ text+''

)

/ / Resetoutputforappending

Output=''

/ / Iterateoverallcharsinthetext

For (iSuppli)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.