gpt4 book ai didi

css - 当文本在 HTML 段落中换行时,使用 *only* css 对齐第一行的第一个非空白字符

转载 作者:太空宇宙 更新时间:2023-11-04 04:37:52 26 4
gpt4 key购买 nike

我有一段文字如下:

<p>

&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp; In this respect, the conceptual structure of the Act is something like a pyramid. The pyramid shape illustrates the way the income tax law is organised, moving down from the central or core provisions at the top of the pyramid, to general rules of wide application and then to the more specialised topics.

</p>

目前它呈现为:

                   In this respect, the conceptual structure of the Act is something like a pyramid. The pyramid shape illustrates the way the income tax law is organised, moving down from the central or core provisions at the top of the pyramid, to general rules of wide application and then to the more specialised topics.

我希望它像这样呈现:

                   In this respect, the conceptual structure of the Act is something like a                    pyramid. The pyramid shape illustrates the way the income tax law is                     organised, moving down from the central or core provisions at the top of                    the pyramid, to general rules of wide application and then to the more                    specialised topics.

只使用 CSS!

背景故事

我正在将 Markdown 文件转换为 HTML。这些文件在源代码管理中。 Markdown 文件已经使用 &ensp; 为我缩进了字符。我还想要干净的提交日志,所以我想保留每个 <p>在一条线上。

编辑

这是一份 Markdown 文档的一个部分的要点:https://gist.github.com/vjpr/5378401

基本上我想

  • 避免在我的 Markdown 文档中使用内联 html。
  • 允许在 GitHub 上查看带缩进的 Markdown 文档。
  • 允许使用自定义样式表查看相同的 Markdown 文档,并保持段落的缩进级别与第一个非空白字符的缩进级别相同,如图所示。

最佳答案

您可以结合使用 padding-left 和 negative text-indent,例如

p{
padding-left:18em;
border: 1px solid black;
text-indent :-9em;
}

fiddle 示例:http://jsfiddle.net/NzUtM/1

您可以根据需要随意调整填充和缩进。

关于css - 当文本在 HTML 段落中换行时,使用 *only* css 对齐第一行的第一个非空白字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15987686/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com