如何使用HTML与CSS将p标签内文本排列为指定阶梯缩进格式

实现方案 #

你给出的HTML结构不需要修改，直接添加以下CSS代码即可实现阶梯缩进的文本排列效果：

.stylish-txt {
  width: 420px;
  line-height: 24px;
  font-family: monospace;
  margin: 0;
}

.stylish-txt::before {
  content: "";
  float: left;
  height: 120px;
  /* 定义左侧挤压形状，实现逐行缩进效果 */
  shape-outside: polygon(
    0 0,
    2ch 0,
    2ch 24px,
    4ch 24px,
    4ch 48px,
    6ch 48px,
    6ch 72px,
    8ch 72px,
    8ch 96px,
    10ch 96px,
    10ch 120px,
    0 120px
  );
}

如果要完全复现你给出的等号阶梯效果，把p标签内的文本替换为以下内容即可：

========================================
===================================
===============================
========================
================

内容的提问来源于stack exchange，提问作者Code cracker