What are the main properties of css text settings?

The main attributes of css text settings are: font-famil, font-size, color, text-align, text-decoration, border, text-shadow, Word-warp, Word-break, direction, etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css text various attribute collection

1. Font attribute

• font-family: 'Microsoft Yahei' Specify the font Css attribute to set the style

• font-size: Set the font size.

• font-weight: Set the thickness of the text

• font-style: Set the font inclination. Possible attributes are normal, italic, and oblique;

• line-height: Set the line spacing of the font;

• color Font color

## 2. Text attributes

• text-align: Control the alignment of text

• text-indent: Control the first line of text The indentation can be px or %;

• white-space: the blank space in the document
  Attribute value:
  • noraml: By default, multiple spaces are ignored and only one space is output.

  • nowrap: Force no line breaks

  • pre: Space/indent /Line wrapping will preserve

  • pre-line: merge empty tables (multiple spaces will only output one space)

  • pre-warp: Keep whitespace/indentation, normal line wrapping;

• letter-spacing: control the distance between letters;

• text-overflow: What happens when text overflows the containing element;
  • Property value:

  • clip Trim text.

  • ellipsis Displays ellipses to represent trimmed text.

  • string Use the given string to represent the trimmed text.

• word-spacing: Control the distance of spaces between words, use spaces to distinguish words, both Chinese and English are OK;

3. Underline attribute

• none and no underline

• overline Defines a line on the text.

• line-through defines a line that passes under the text.

• underline Defines a line under the text.

4. Convert case

• none (default) no conversion;

• capitalize: the first letter of each word is capitalized;

• upercase: conversion into uppercase;

• lowercase: into lowercase;

CSS video tutorial]

5. Border attribute

6. Box-shadow

##box-shadow: Box-shadow;

can have five values ​​( h-shadow horizontal shadow position, v-shadow vertical shadow position, blur blur distance, spread shadow size, color, inset/outset inner and outer shadow)

box-shadow: 10px 5px 10px red inset;

7. The text exceeds the line break

• Word-warp: Allow long words to be converted to the next line

• Word-break :Allow line breaks within words (automatic line wrapping)

8. Text placement format

direction: Text placement Place direction

• ltl:from left to right

• rtl:from right to left

9. The text exceeds the line wrap

• Word-warp: Allow long words to be converted to the next line

• Word-break: Allow line breaks within words (automatic line wrapping)

10. Text shadow

• text-shadow: Reference box shadow

11. A single line of text exceeds the display ellipsis

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

12. Multiple If the line text exceeds the limit, replace it with ellipses

{
  overflow:hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
}

Programming Video! !

The above is the detailed content of What are the main properties of css text settings?. For more information, please follow other related articles on the PHP Chinese website!