CSSで一行目をインデントする方法

2年 ago
光, 明
1 minute

CSSテキストのインデントを実現するには、”::first-line”擬似要素および”text-indent”プロパティを使用できます。

まず、CSSでクラスを定義または要素を選択し、「::first-line」擬似要素を使って最初の行を選択します。次に、「text-indent」プロパティを使って、最初の行のインデントの大きさを設定します。

次のコード例を参照してください

<style>
.indent {
text-indent: 2em;
}
/* 选中类名为indent的元素的首行 */
.indent::first-line {
text-indent: 0;  /* 取消首行缩进 */
font-weight: bold;  /* 设置首行为粗体 */
}
</style>
<p class="indent">这是一个示例文本，首行缩进2个em。</p>

上記の例では、最初の行のインデント量は 2em です。「text-indent」プロパティの値を必要に応じて調整することで、さまざまな最初の行のインデント効果を実現できます。

bannerAds