ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで2単語と3単語の配置を設定する方法

CSSで2単語と3単語の配置を設定する方法

青灯夜游
青灯夜游オリジナル
2021-03-09 14:55:148668ブラウズ

CSS では、text-align 属性を使用して 2 つの単語と 3 つの単語を揃えることができ、text 要素に「text-align: justify;」スタイルを設定するだけで、テキストの配置を実現できます。 3つの単語と2つの単語を並べる効果。

CSSで2単語と3単語の配置を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css の 2 単語と 3 単語の配置

<!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>

レンダリング:

CSSで2単語と3単語の配置を設定する方法

手順 :

CSS では、text-align の属性値は justify で、これは位置揃えを意味します。達成される効果は、テキスト行を両端に揃えて表示できることです (テキストの内容は 1 行を超える必要があります)。

しかし、これを使用するだけではまだ役に立ちません...

テキストの両端を揃えるには、 、 タグ

を使用することをお勧めするチュートリアルは次のとおりです: CSS ビデオ チュートリアル html ビデオ チュートリアル

以上がCSSで2単語と3単語の配置を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。