Home  >  Article  >  Web Front-end  >  How to set the alignment of two words and three words in css

How to set the alignment of two words and three words in css

青灯夜游
青灯夜游Original
2021-03-09 14:55:148662browse

In CSS, you can use the text-align attribute to align two words and three words; you only need to set the "text-align: justify;" style to the text element, which can realize text Alignment effect, aligning three words and two words.

How to set the alignment of two words and three words in css

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

css two-word and three-word alignment

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
        p{
            width: 70px;
            height: 40px;
            line-height: 40px;
            background: paleturquoise;
            text-align: justify;
        }
        p > span {
            display: inline-block /* Opera */;
            padding-left: 100%;
        }
    </style>
</head>
<body>
    <p>你好<span></span></p>
    <p>大家好<span></span></p>
    <p>同学们好<span></span></p>
</body>
</html>

Rendering:

How to set the alignment of two words and three words in css

Instructions :

In CSS, text-align has an attribute value of justify, which means alignment. The effect achieved is that a line of text can be displayed aligned at both ends (the text content must exceed one line).

But just using it is still useless...

To align the text at both ends, we have to use an inline empty tag to help, such as , tag

: CSS video tutorial, html video tutorial

The above is the detailed content of How to set the alignment of two words and three words in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn