web-dev-qa-db-ja.com

DIVが折り返されるときに、DIV内のテキストをインデントする最良の方法は何ですか？

だから私はいくつかの動的テキストを含むDIVを持っています。テキストとフォントサイズはわかっているが、DIVのサイズがわからないとします。テキストが折り返されるときにインデントを表示するのに十分なインテリジェントなDIVでのテキストの表示を希望します。

私の元のテキストが次のようなものだったとしましょう：

 Lorem ipsum dolor sit amet、
 consectetur adipisicing 
 elit、sed do eiusmod 
 tempor incididunt

代わりに、次のようにしたいと思います。

 Lorem ipsum dolor sit amet、
 consectetur adipisicing 
 elit、sed do eiusmod 
 tempor incididunt

DIVのサイズがアプリオリにわからない場合、これを行う最善の方法は何ですか？そして、私がサイズを知っている場合、それを行うための最良の方法は何ですか？

ありがとう！

csshtmlword-wrap
28
fetucine53

私があなたが何を求めているのか理解できれば、これは私にとってはうまくいきます：

div {
    padding-left: 2em;
    text-indent: -2em;
}
48
Allain Lalonde

クロスブラウザーのサポートについては不明ですが、 first-line pseudo-element を使用できます：

p {padding:10px;}
p:first-line {padding-left:0px;}

<p>Hello World, I'm Jonathan Sampson</p>

として表示されます

ハローワールド
ジョナサン
サンプソン

それ以外に、要素に左パディングを付けてから、負のテキストインデントを付けることができます。

6
Sampson

W3Cは、text-indentプロパティを使用する必要があるとだけ言っています。

ソース

.indentedtext
{
    text-align:start;
    text-indent:5em;
}
6
jpsimard-nyx

これは、可変サイズのDIVでも固定サイズのDIVでも同じように機能するはずです。

<div style="width: 150px; text-indent: -2em; padding-left: 2em;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt.
</div>
1
Noldorin

CSSを使用するtext-indentプロパティ：

.box {
  border: 1px solid #ddd;
  background: #fff;
  max-width: 300px;
  padding: 15px 15px 15px 45px;
}  

.box p {
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
  text-align: justify;
  font-size: 12px;
  text-indent: -30px;
} 
<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo repellendus natus minima ex possimus? Pariatur odit distinctio, similique, adipisci nesciunt molestias iusto ipsa repellendus recusandae unde, enim veniam voluptatem expedita.</p>
</div>
0
Razvan Zamfir