ホームページ > 記事 > ウェブフロントエンド > 1行目のインデントを設定する方法

1行目のインデントを設定する方法

不言オリジナル: 2018-11-12 10:37:4532406ブラウズ

最初の行のインデントを設定する方法: 最初に HTML サンプルファイルを作成し、次に本文にテキストコンテンツを定義し、最後に「text-indent」属性を使用して最初の行のインデント効果を設定します。

1行目のインデントを設定する方法

#この記事の動作環境: Windows7 システム、Dell G3 コンピューター、HTML5&&CSS3。

この記事の内容は、HTML を使用して段落の最初の行をインデントするコードです。段落のインデントに必要な属性が text-indent であることを知っておく必要があります。詳細を見てみましょう。。コンテンツ。

構文形式:

text-indent: (インデント幅)

記述例:

p {text-indent:1em;}

コード例 1: 単一文字のインデント

"text-indent:1em" を指定すると、段落の先頭を 1 文字インデントします。

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:1em;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

(関連する推奨事項:

CSS 学習マニュアル )

結果の表示

Web を使用するブラウザで上記のHTMLファイルを表示します。以下のような効果が表示されます。段落の1行目が1文字インデントされていることが確認できます。

1行目のインデントを設定する方法

コード例 2: セミテキストインデント

「text-indent: 0.5 em」と指定すると、段落の先頭を 0.5 em ずつインデントできます。キャラクター。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:0.5em;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

結果の表示

Webブラウザを使用して上記のHTMLファイルを表示すると、以下のような効果が表示されます。段落の最初の行が縮小していることを確認します。

1行目のインデントを設定する方法

コード例 3: ピクセル指定

「text-indent:14px」を指定して、段落の先頭を 14 ピクセルだけインデントします。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:14px;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

結果の表示

Web ブラウザを使用して上記の HTML ファイルを表示すると、次のような効果が表示されます。段落の先頭のピクセル数がインデントされます。

1行目のインデントを設定する方法

この記事はここで終了です。CSS の詳細については、php 中国語 Web サイトの

CSS ビデオチュートリアル列を参照してください。！！

以上が1行目のインデントを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：::before は何をするのでしょうか? ::before と :before はどう違いますか？次の記事：::before は何をするのでしょうか? ::before と :before はどう違いますか？

続きを見る