web-dev-qa-db-ja.com

段落の最初の行の後のテキストのインデント

-村人たちが襲撃が行われたと言ったナンガハール州のサークロド地区のロイター記者は、アフガニスタン警察が地元の政府の建物に石を投げ始めた後に群衆に発砲したと述べた。

上記の段落では、CSSを使用して最初の行の後のすべての行を作成し、各行が最初の行の-の直後に残るように自動的にスペースをインデントします。

[〜＃〜] html [〜＃〜]

<p> - A Reuters reporter in Surkhrod district in Nangarhar province, where 
villagers said the raids took place, said Afghan police fired at the crowd 
after some of them started throwing stones at local government buildings.</p>

リストの位置が外部に設定されているリストアイテムに似ていますが、リストを使用したくありません。

この効果を達成するために考えられる最も簡単な方法は何ですか？余分なHTMLマークアップは少ない方が良いでしょう。

皆様に感謝します。

htmlcssindentationtext-indent
45
bobo

text-indent 。通常は text-indentは最初の行を内側にプッシュしますが、マイナスの数値を指定して正のマージンを使用すると、目的の効果を達成できます。

text-indent: -10px;
margin-left: 10px
74
Mathew
p {
  text-indent: -1em;
  padding-left: 1em;
}
41
kennytm

現時点では使用できませんが、 Experimental Web platform Flag on chromeを使用すると、text-indent:1em each-line;これはあなたが望むことを正確に行う必要があります。

MDNのテキストインデント

2
sylvain

インライン要素では、動作が異なる可能性があります。 「アウトデント」（最初の行は段落の残りよりもさらに左）が必要でしたが、上記の提案が反対になったことに気付きました-通常のインデントを作成しました（最初の行は他の行よりも右です）。インライン要素、たとえば「a」タグで機能するものを次に示します。

#myDiv ul li { margin-left:1em; }
#myDiv ul li a { color:#333; text-indent:0.5em; margin-left:-1em; line-height:1; }

また、包含ブロックレベル要素に1emのマージンを設定します。これにより、インラインの「a」要素が負のマージンで始まり、実際に混乱する前の本来の位置に正確に配置されます。 「アウトデント」。

これが誰かを助けることを願っています！また、インライン要素のテキストインデント自体にもサイズ制御がないことに気付きました。

JSFiddleの例

1
code-sushi

@kennytmの答えに基づいて作成します。等幅テキストを揃える場合は、ch単位ではなくem単位を使用します。例えば：

<div class="query-select">SELECT Field1, Field2, Field3, Field4, Field5, Field6, Field7, Field8, Field9, Field10</div>

chベースのパディング/負のインデント付き

.query-select {
  padding-left: 8ch;
  text-indent: -7ch;
}

（ページ幅に基づいて）レンダリングします：

  SELECT Field1, Field2, Field3, Field4, Field5, Field6, 
         Field7, Field8, Field9, Field10
0
Jason Clark