Question

在Microsoft Word中，毫无疑问，大多数其他（现代）文字处理器，你可以拥有一个＆＃34;列表＆＃34;项目（我使用术语＆＃34;列表＆＃34;松散地在这里），带有一个悬挂的初始字符，然后插入一个TAB以强制实际文本的第一个字符与块的左边距对齐。例如。如果我有一堆符号作为标识符，我可以：

#    Foo bar on a long line
     Where this is part of the "#" symbol identifier above
%%   And this is a new line broken over many lines, but the
     left-most edge still aligns
$__$ Isn't that fine?

我正在尝试使用CSS在HTML5中执行类似的操作。我发现了有关缩进的信息，la：

<p style="padding-left: 100px; text-indent: -100px"># Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lectus dolor, ultrices at euismod eu, dapibus sit amet mauris. Etiam maximus pulvinar sollicitudin.</p>

然而，虽然段落留有一个悬挂缩进，但第一个有意义的字符（＆＃34; L＆＃34;在＆＃34; Lorem＆＃34;）与第一个有意义的字符不对齐换行。例如，它出现如下：

# Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Aliquam lectus dolor, ultrices at euismod eu, dapibus
    sit amet mauris. Etiam maximus pulvinar sollicitudin.

当我希望它如此出现时：

# Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Aliquam lectus dolor, ultrices at euismod eu, dapibus
  sit amet mauris. Etiam maximus pulvinar sollicitudin.

进一步观察我发现了悬挂标点符号，但这似乎并不支持任何地方;此外，它特定于标点符号 - 如果我想使用字母而不是符号，该怎么办？

有关如何完成此任务的任何建议？

非常感谢。

Answer 1

这可以通过几种不同的方式完成。

一种方法是在CSS中使用::before伪选择器。

p { 
  position: relative;
  margin: 40px; /* added just to move snippit away from window edges. */ }


/* this applies to all p tags */
p::before { 
    position: absolute;
    left: -30px; /* moves character on top of left margin, away from text */  }


/* below merely inserts a character based on the class of the p tag */
p.hash::before {  content: '#';  }

p.bang::before {  content: '!';  }

p.huh::before {  content: '?';  }

p.dbl::before {  content: "%%"; }

p.law::before {  content: "§"; }

<p class="hash">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p class="bang">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p class="huh">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p class="dbl">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

<p class="law">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

Answer 2

正如@Scott在他的好答案中所提到的，这可以通过几种不同的方式实现，因此您也可以使用span position:absolute和零{{1}来实现}，以及left和margin-left的组合形成差距，如下所示：

jsFiddle

＆＃13;

padding-left

＆＃13;

p{
  margin-left:10px;
  padding-left:40px;
  position:relative;
}
p .symbols{
  position:absolute;
  left:0;
}

＆＃13;

CSS相当于Microsoft Word中的编号列表

2 个答案: