「CSS」text-indentを使って1行目のインデントを指定する

環境
Google Chrome 103.0.5060.53(Official Build)

構文
text-indent: 値
数値: px(ピクセル)やemなどの単位で指定します。
%:割合で指定します。
each-line: 1行目と強制改行した次の行もインデントします。
hanging: 1行目以外をインデントします。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
td{
border:1px solid #808080;
word-wrap:break-word;
}
</style>
</head>
<body>
<p style="text-indent:15px;">1行目のインデントは15pxです。</p>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> table{ border-collapse:collapse; table-layout:fixed; width:100%; } td{ border:1px solid #808080; word-wrap:break-word; } </style> </head> <body> <p style="text-indent:15px;">1行目のインデントは15pxです。</p> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>
table{
  border-collapse:collapse;
  table-layout:fixed;
  width:100%;
}
td{
  border:1px solid #808080;
  word-wrap:break-word;
}
</style>
</head>
<body>
<p style="text-indent:15px;">1行目のインデントは15pxです。</p>
</body>
</html>

結果
画面に1行目のインデントを15pxにします。

CSS

Posted by arkgame