CSS Text Properties

❮ Previous Home Next ❯

The CSS text properties are used to style texts.

The following are some important CSS text properties:




The CSS text-indent Property

The text-indent property specifies the indent in the first line of a block-level element.

Syntax:

text-indent: length;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

The following example text-indent to 50px so paragraph will start 50px from left:

Example

p {
  max-width:300px;
  border: 1px solid;
  padding: 10px;
  text-indent: 50px;
}



text-overflow

The text-overflow property sets how hidden overflow content is signaled to users.

Syntax:

text-overflow: clip|ellipsis;

text-overflow: clip (default):

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

text-overflow: ellipsis:

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example

.example1 {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: clip;
  border: 1px solid black;
}

.example2 {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid black;
}



text-transform

The text-transform property transforms the case of the affected text.

Syntax:

text-transform: capitalize|uppercase|lowercase;

text-transform: uppercase;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

text-transform: lowercase;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

text-transform: capitalize;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example

.example1 {
  text-transform: uppercase;
}

.example2 {
  text-transform: lowercase;
}

.example3 {
  text-transform: capitalize;
}



word-break

The word-break property sets whether line breaks appear wherever the text would otherwise overflow its content box.

Syntax:

word-break: normal|break-all|keep-all|break-word;

word-break: break-all;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

word-break: keep-all;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

word-break: break-word;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example

.example1 {
  word-break: break-all;
}

.example2 {
  word-break: keep-all;
}

.example3 {
  word-break: break-word;
}



word-spacing

The word-spacing property sets the spacing between words.

Syntax:

word-spacing: normal|length;

word-spacing: normal; (default)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

word-spacing: 50px;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example

.example1 {
  word-spacing: normal;
}

.example2 {
  word-spacing: 50px;
}






word-wrap

The word-wrap property applies to inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.

Syntax:

word-wrap: normal|break-word;

word-wrap: normal; (default)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

word-wrap: break-word;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example

.example1 {
  word-wrap: normal;
  width: 50px;
  border: 1px solid black
}

.example2 {
  word-wrap: break-word;
  width: 50px;
  border: 1px solid black
}



writing-mode

The writing-mode property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.

When set for an entire document, it should be set on the root element (html element for HTML documents).

Syntax:

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

writing-mode: horizontal-tb;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

writing-mode: vertical-rl;;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

writing-mode: vertical-lr;

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Example

.example1 {
  writing-mode: horizontal-tb;
}

.example2 {
  writing-mode: vertical-rl;
}

.example3 {
  writing-mode: vertical-lr;
}



All CSS Text Properties

Property Description
text-indent Specifies the indent in the first line of a block-level element.
text-justify Sets what type of justification should be applied to text when text-align: justify; is set on an element.
text-overflow Sets how hidden overflow content is signaled to users.
text-transform Controls the capitalization of text.
word-break Sets whether line breaks appear wherever the text would otherwise overflow its content box.
word-spacing Sets the spacing between words.
word-wrap Sets unbreakable words to be broken and wrap to the next line.
writing-mode Sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
❮ Previous Home Next ❯