“This is 12 days of my participation in the First Challenge 2022. For details: First Challenge 2022”

Common text styles added in CSS3 are as follows:

  1. Text-shadow Indicates the text shadow
  2. Text-overflow Text overflow
  3. Word-wrap and word-break enforce line breaks
  4. @font-face Embed font

First, the text – shadow

  1. Syntax: text-shadow:x-offset y-offset blur color;
  • X-offset: indicates the horizontal offset of the shadow. The unit can be px em or percentage
  • Y-offset: vertical shadow. Indicates the vertical offset of the shadow. The units can be px em or percentage (positive: downward offset; Negative: offset up)
  • Blur: Indicates the blur degree of the shadow. The unit can be px em or percentage (the larger the blur value is, the more blurred the shadow is; Blur cannot be a negative number! Set it to 0 if you don’t want to blur it.)
  • Color: The color of the shadow
  1. Defining multiple shadows: When defining multiple shadows, text-shadows are separated by commas, and the shadow effects are displayed from left to right
  2. Example:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> < span style> < span style> < span style> text-shadow: 4px 4px 2px gray; } #test2 {background-color: # CCC; font-size: 40px; font-weight: bold; color: #ddd; Text-shadow: -1px 0 0 #333, /* Left shadow */ 0 -1px 0 #333, /* Up shadow */ 1px 0 0 #333, /* Right shadow */ 0 1px 0 #333; #test3 {background-color:thistle;} #test3 {background-color:thistle; font-size: 40px; font-weight: bold; color: #ddd; Text-shadow: -1px 0 0 white, /* left shadow */ 0-1px 0 white, /* Up shadow */ 1px 0 0 #333, /* Right shadow */ 0 1px 0 #333; #test4 {background-color: # CCC; background-color: # CCC; background-color: # CCC; font-size: 40px; font-weight: bold; color: #ddd; text-shadow: -1px 0 0 #333, /*x offset negative is left shadow */ 0 -1px 0 #333, /* Y offset negative is up shadow */ 1px 0 0 white, /* X offset positive is right shadow */ 0 1px 0 white; */ #test5{text-align: center; color: #45B823; padding: 20px 0 0 20px; background-color: #FFF; font-size: 60px; font-weight: bold; text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #ffdd33, -2px -15px 11px #ff8800, 2px -25px 18px #ff2200; </style> </head> <body> <div id="test1"> I am general shadow effect </div> <div id="test2"> I am Stroke shadow effect </div> <div id="test3"> <div id="test5"> </div> </body> </ HTML >Copy the code

Second, the text – overflow

  1. Syntax: text-overflow: values;
  • There are two values:
    • Ellipsis: Displays ellipsis when text overflows and hides excess text
    • Clip: When text overruns, the ellipsis is not displayed, but the text is cut out (default)

! Note: in practice, ellipsis cannot be implemented with text-overflow; to do so, you need to combine white-space with overflow

Complete syntax:

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

  1. Single line text omission effect & Multi-line text omission effect:
  • Single line text ellipsis effect for the above fixed collocation
  • The ellipsis effect of multi-line text cannot be achieved with CSS, so JS must be used
  1. Code examples:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> div {width: 200px; height: 100px; border: 1px solid silver; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <div> Tao Yuanming in the Jin Dynasty loved chrysanthemums alone. Since Li Tang dynasty, the world loves peony very much. To ailian alone out of the silt and not dyed, zhuo Qinglian and not demon, straight, not sprawling, xiangyuan Yiqing, pavilions net planting, can be far view and not obscene play yan. To the chrysanthemum, the recluse of flowers; Peony, the wealth of flowers also; Lotus, the gentleman of flowers also. Alas! There Chrysanthemum love, pottery rarely heard. Lotus love, with whom? </div> </body> </ HTML >Copy the code

Word -wrap and word-break

3-1, word wrap

Syntax: word-wrap: value;

  • There are two values:
    • Normal: automatic line wrap (default)
    • Break-word: force line breaks

3-2, the word – break

Syntax: word-break: indicates the value.

  • There are three values:
    • Normal: automatic line wrap (default)
    • Break-all: allows line breaks inside words
    • Keep-all: newlines are allowed only at half-corner Spaces or hyphens

3-3, word-wrap & word-break difference

The difference between the two is in English:

  • word-wrap: break-word; It is used to decide whether to allow a short sentence within a word. It first tries to move the word to the next line to see if it can be put down, and then breaks a sentence within the word if it can’t
  • word-break: break-all; Is direct line breaking, direct word breaking

3-4. Code examples

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-break </title> <style> div {width: 200px; height: 120px; border: 1px solid silver; /* Will try to put the full word on the next line */ word-wrap: break-word; /* word-break: break-all; */ } </style> </head> <body> <div>Welcome, everyone! Please remember our homepage website is: http://www.123123123.com/index.html</div> </body> </html>Copy the code
  • word-wrap: break-word; The effect of:

  • word-break: break-all; The effect of:

Fourth, @ the font – face

If you want a font to display properly on all users’ computers, you need to embed fonts.

That is, download the font file from the server to the local computer, and then allow the browser to display the font that is not installed on the user’s computer.

  1. Grammar:
@font-face { font-family: myfont; src: url(".." ); } div { font-family: myfont; }Copy the code
  • The first step is to define the font using @font-face
  • The second step uses font-family to reference the font
  1. Matters needing attention

It is not recommended to use @font-face to embed Chinese fonts, because most files are over 10M! The page loading speed is severely affected

English fonts are only tens of kilobytes (because there are only 26 letters)

  1. @font-face can be used not only to embed fonts, but also to implement font icon technology, known as iconfont