换行时在 DIV 中缩进文本的最佳方法是什么？答案

【问题标题】：What is the best way to indent text in a DIV when it wraps?换行时在 DIV 中缩进文本的最佳方法是什么？
【发布时间】：2010-10-03 14:15:00
【问题描述】：

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

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

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

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

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

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

谢谢！

【问题讨论】：

标签： css html word-wrap

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

source

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

【讨论】：

W3Schools 说它从 IE4 源代码开始工作：w3schools.com/css/css_text.asp 网络上的某些站点建议在 IE6 中正确地进行文本缩进，您需要使用 text-align:left 应用它；并显示：块；

【解决方案3】：

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

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

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

将显示为

你好，我是
乔纳森
桑普森

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

【讨论】：

这对我不起作用，我尝试了一堆排列。你真的测试过吗？

【解决方案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>

【讨论】：

我已经在 Firefox 3 和 IE7 上测试了代码，它似乎在两者上都表现得非常好。

【解决方案5】：

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

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

【讨论】：

我还必须添加“display: inline-block;”让这对我有用。
这会缩进第一行之后的所有文本，包括如果您使用<br>。它与“换行文本”的描述不完全一样，尽管shift+ent 的约定是与前一行保持左对齐，其中<br> 是html 版本，所以这是可以预料的。但是，如果您只查找 wrapped text 缩进，则不是这个。