36

所以我有一个包含一些动态文本的 DIV。假设我知道文本和字体大小，但我不知道 DIV 的大小。我希望 DIV 中的文本显示足够智能，以便在文本换行时显示缩进。

假设我的原文看起来像这样：

Lorem ipsum dolor sit amet，
结构性脂肪
精英，sed 做 eiusmod
临时事件

相反，我希望它看起来像这样：

Lorem ipsum dolor sit amet，
   结构性脂肪
   精英，sed 做 eiusmod
   临时事件

如果我不知道 DIV 先验的大小，最好的方法是什么？如果我知道尺寸，最好的方法是什么？

谢谢！

4

5 回答 5

57

如果我明白你的要求，这对我有用：

div {
    padding-left: 2em;
    text-indent: -2em;
}
于 2009-01-26T17:23:25.303 回答
7

不确定跨浏览器支持，但您可以使用第一行伪元素：

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

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

将显示为

Hello World 我是
    乔纳森·
    桑普森

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

于 2009-01-26T17:27:15.967 回答
6

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

资源

.indentedtext
{
    text-align:start;
    text-indent:5em;
}
于 2009-01-26T17:28:46.370 回答
2

这对于可变和固定大小的 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>
于 2009-01-26T17:27:07.323 回答
0

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

于 2018-08-29T11:15:50.387 回答