Question

所以我有一个包含一些动态文本的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的大小，那么最好的方法是什么？如果我知道尺寸，最好的方法是什么？

谢谢！

Answer 1

如果我理解你的要求，这对我有用：

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

Answer 2

不确定跨浏览器支持，但您可以使用first-line pseudo-element：

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

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

将被视为

Hello World我是乔纳森
桑普森

除此之外，你可以给元素左边填充，然后给出负文本缩进。

Answer 3

W3C说你只需要使用text-indent属性。

source

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

Answer 4

对于可变和固定大小的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>

Answer 5

使用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>

包装时DIV中文本缩进的最佳方法是什么？

5 个答案: