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

text-decoration: Controls whether the text is underlined. Possible values ​​are

• 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

text-transform:

Attribute value:

• none (default) no conversion;

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

• upercase: conversion into uppercase;

• lowercase: into lowercase;

[Recommended tutorial:

CSS video tutorial]

5. Border attribute

AttributeDescriptionborderAbbreviated attribute, used to set attributes for four sides in one statement. border-style is used to set the style of all borders of an element, or set the border style for each side individually. border-widthShorthand attribute, used to set the width of all borders of an element, or set the width of each border individually. border-colorShorthand attribute, sets the color of the visible part of all borders of the element, or sets the color for each of the 4 sides. border-bottom Abbreviation attribute, used to set all attributes of the bottom border into one statement. border-bottom-colorSet the color of the bottom border of the element. border-bottom-style Set the style of the bottom border of the element. border-bottom-widthSet the width of the bottom border of the element. border-left Abbreviation property, used to set all properties of the left border into one statement. border-left-colorSet the color of the left border of the element. border-left-style Set the style of the left border of the element. border-left-widthSet the width of the left border of the element. border-right Abbreviation property, used to set all properties of the right border into one statement. border-right-colorSet the color of the right border of the element. border-right-style Set the style of the right border of the element. border-right-widthSet the width of the right border of the element. border-top Abbreviation attribute, used to set all attributes of the top border into one statement. border-top-colorSet the color of the top border of the element. border-top-style Set the style of the top border of the element. border-top-widthSet the width of the top border of the element.

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)

eg:

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

Attribute value:

• 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;
}

For more programming-related knowledge, please visit:

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!