BinaryDevelop
  1. ホーム
  2. html

[解決済み] CSSで段落の2行目からインデントする

2022-03-10 12:07:08

質問

段落の2行目からインデントするにはどうすればよいですか？

試してみたところ 

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

そして 

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

そして 

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

解決方法は？

インデントしたいのは文字通り2行目だけなのか、それとも から は2行目（つまり ぶら下がりインデント )?

後者であれば、次のようなものです。 JSFiddle が適切でしょう。 

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

この例では、DIVとSPANで同じCSS構文を使用した場合、異なる効果が得られることを示しています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します