Login With Github

CSS Text

There are some properties in CSS that define the appearance of text, including: text-align, text-decoration, text-transform, text-indent, and so on. With these properties, you can change the text's alignment, spacing, indentation, and more.

Text Alignment

The text-align property sets the horizontal alignment of the text.

The following example shows left-aligned, right-aligned, and center-aligned text:

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

Note: If the language direction is from left to right, the default value of text-align is left; if the language direction is from right to left, the default value of text-align is right.

You can also set the text-align property value to justify. In justified text, the beginning and ending words of each line of text are on the left and right boundaries of the parent element, and the middle words automatically adjust the spacing so that the length of each line is the same.

div {
    text-align: justify;
}

Text Indentation

The CSS text-indent property can indent the first line of the element by a certain length, and the length value can be negative.

We often use the text-indent property in the <p> element to indent the first line of text in a paragraph. For example, the following CSS rule will indent the first line of all paragraphs by 5 em:

p {
    text-indent: 5em;
}

Note: The text-indent property applies only to block-level elements and cannot be applied to inline elements.

Text Decoration

Next, we will discuss the text-decoration property, which is an interesting property that provides a lot of very interesting behaviors.

The text-decoration property has the following 5 values:

  • none
  • underline
  • overline
  • line-through
  • blink

text-decoration:none means that the text doesn't need any decoration. It is generally used to remove the underline of the link text.

The other values of the text-decoration property are used to underline, overline, strikethrough, and sparkle the text:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

h4 {
    text-decoration: blink;
}

Text Transformation

The text-transform property can change the case of the text. This property has the following four values:

  • none - keep the original case of the text
  • uppercase - convert all text to uppercase
  • lowercase - convert all text to lowercase
  • capitalize - capitalize the first letter of each word in the text

Here is an example using the text-transform property:

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Word Spacing

The word-spacing property changes the spacing of each word in the text. The default value is either normal or 0.

If the word-spacing property value is positive, the word spacing increases. Otherwise, the word space will be pulled closer. E.g:

p.spread {
    word-spacing: 30px;
}
p.tight {
    word-spacing: -0.5em;
}

<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>

<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

Note: The word "word" here refers to a string of non-blank characters surrounded by whitespace characters, with no actual semantics.

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

h1 {
    letter-spacing: -0.5em
}
h4 {
    letter-spacing: 20px
}

<h1>This is header 1</h1>
<h4>This is header 4</h4>

Whitespace

The white-space property controls the whitespace and line breaks in the text.

pre

By default, the browser will match multiple consecutive whitespaces into a single whitespace, but you can keep whitespace with the following CSS rules:

p {
    white-space: pre;
}

<p>This     paragraph has    many
    spaces           in it.</p>

The <p> element is equivalent to the <pre> element at this time.

Nowrap

If you set the white-space property value to nowrap, the browser will prevent text wrapping unless the <br> element is used.For example:

p{
    white-space: nowrap
}

<p>
here are som texts.
here are som texts.
here are som texts.
here are som texts.
here are som texts.
</p>

pre-wrap and pre-line

If you set the white-space property value to pre-wrap, the browser will not only retain the whitespaces but also support text wrapping. If you set the white-space property value to pre-line, the browser will merge the whitespaces, but it still support automatic text wrapping.For example:

<html>
<head>
<style type="text/css">
p.pre-wrap {
    white-space: pre-wrap;
}
p.pre-line {
    white-space: pre-line;
}
</style>
</head>
<body>

<h1>white-space: pre-wrap</h1>
<p class="pre-wrap">This     paragraph has    a  great    many  s p a c e s   with
its textual  content, but their    preservation     will  not prevent
line   wrapping or line breaking.</p>

<h1>white-space: pre-line</h1>
<p class="pre-line">This     paragraph has    a  great    many  s p a c e s   with
its textual  content, but their    collapse     will  not prevent
line   wrapping or line breaking.</p>

</body>
</html>

Text Direction

The direction property controls the output direction of the text.

The direction property has two values: ltr and rtl. The default value of the direction property is ltr, which means that the text is output from left to right. If you want the text to be output from right to left, you should set the direction property to rtl.

0 Comment

temp