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

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;
}

这会缩进第一行之后的所有文本，包括如果您使用“<br>”。它并不完全像“换行文本”所描述的那样，尽管 `shift+ent` 的约定是与上一行保持左对齐，其中 `<br>` 是 html 版本，所以这应该是预期的。但是，如果您只是在寻找*换行文本*缩进，那么它不是这个。 (5认同)
我还必须添加"display:inline-block;" 这对我有用. (2认同)

Answer 2

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

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

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

将被视为

你好世界我是
Jonathan
Sampson

除此之外,你可以给元素左边填充,然后是负文本缩进.

Answer 3

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

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