CSSで段落の2行目からインデントを開始する 質問する

CSSで段落の2行目からインデントを開始する 質問する

段落の 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;
}

ベストアンサー1

インデントしたいのは文字通り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 構文を使用すると、異なる効果が得られることを示しています。

おすすめ記事