「CSS」インデント(text-indent)を数値で指定する

2021年9月17日

書式
text-indent: 数値(length)px;
<length> を絶対値として字下げが指定されます。負の値も許可されます。利用できる単位は

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cft {
border: 1px solid #000;
width: 240px;
height: 60px;
background: SkyBlue;
text-indent: 30px;
}
</style>
<p class="cft">aaabbbbbbbddテストメッセージ1改行しません</p>
<style> .cft { border: 1px solid #000; width: 240px; height: 60px; background: SkyBlue; text-indent: 30px; } </style> <p class="cft">aaabbbbbbbddテストメッセージ1改行しません</p>
<style>
  .cft {
    border: 1px solid #000;
    width: 240px;
    height: 60px;
    background: SkyBlue;
    text-indent: 30px;
  }
</style>
<p class="cft">aaabbbbbbbddテストメッセージ1改行しません</p>

インデントをマイナス値で指定

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
.cft {
border: 1px solid #000;
width: 240px;
height: 60px;
background: SkyBlue;
text-indent: -30px;
}
</style>
<p class="cft">aaabbbbbbbddテストメッセージ1改行しません</p>
<style> .cft { border: 1px solid #000; width: 240px; height: 60px; background: SkyBlue; text-indent: -30px; } </style> <p class="cft">aaabbbbbbbddテストメッセージ1改行しません</p>
<style>
  .cft {
    border: 1px solid #000;
    width: 240px;
    height: 60px;
    background: SkyBlue;
    text-indent: -30px;
  }
</style>
<p class="cft">aaabbbbbbbddテストメッセージ1改行しません</p>

 

CSS

Posted by arkgame