如何实现文本自动换行无缩进且不使用<br>标签？

问题根源 #

1. HTML文本冗余空白：你第一个卡片的描述文本里存在硬换行和大量前置空格，浏览器会将这些空白合并渲染，导致换行后出现类似缩进的视觉效果。
2. 段落样式未明确控制：.card-description仅设置了宽度，但未让它在卡片容器内水平居中，加上继承的text-align:center属性，进一步放大了间距问题。

修复步骤 #

1. 清理文本中的冗余空白 #

删除段落内的硬换行和多余空格，改为连续文本：

<p class="card-description">Elewa talents taking the next steps in their careers, fully funded by Elewa Group (equity investments).</p>

2. 调整.card-description的CSS样式 #

添加以下规则，保证文本在设定宽度内无缩进、对齐一致：

.card-description {
  width: 90%;
  padding-bottom: 1.4rem;
  font-size: 1.2rem;
  /* 新增样式 */
  margin: 0 auto; /* 让段落在卡片中水平居中 */
  text-align: left; /* 左对齐，彻底消除缩进感 */
  text-indent: 0; /* 明确禁用首行缩进，避免浏览器默认样式干扰 */
  white-space: normal; /* 自动换行，完全不需要<br>标签 */
}

如果需要保持文本居中对齐，只需保留text-align: center即可，但必须先清理文本中的冗余空白，否则换行后的空格仍会造成视觉间距。

修改后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>Contact Us</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .card-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 100%;
      }

      .card {
        flex: 0 0 calc(50% - 20px);
        margin-bottom: 40px;
        text-align: center;
      }

      .card img {
        width: 50%;
        border-radius: 1em;
      }

      .card-title {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: bold;
      }

      .card-description {
        width: 90%;
        padding-bottom: 1.4rem;
        font-size: 1.2rem;
        margin: 0 auto;
        text-align: left;
        text-indent: 0;
        white-space: normal;
      }

      .apply-today {
        font-size: 16px;
        text-decoration: none;
        color: black;
      }

      a:visited{
        color: #000;
      }

      .apply-today:hover {
        text-decoration: underline;
      }

      @media only screen and (max-width: 768px) {
        .card {
          flex: 0 0 100%;
          margin-bottom: 20px;
        }
      }

      @media only screen and (max-width: 480px) {
        .card {
          flex: 0 0 100%;
          margin-bottom: 20px;
        }

        .card img {
          width: 100%;
        }

        .card-title {
          font-size: 20px;
        }

        .card-description {
          font-size: 16px;
        }
      }
    </style>
  </head>
  <body>
    <section class="card-section">
      <div class="card">
        <img src="https://res.cloudinary.com/db15gy9h6/image/upload/v1678186694/Screenshot_from_2023-03-07_13-56-08_i5cvoh.png" alt="Card Image 1">
        <h2 class="card-title">Title 1</h2>
        <p class="card-description">Elewa talents taking the next steps in their careers, fully funded by Elewa Group (equity investments).</p>
        <p class="apply-today"><u>APPLY TODAY</u></p>
      </div>
      <div class="card">
        <img src="https://res.cloudinary.com/db15gy9h6/image/upload/v1678186694/Screenshot_from_2023-03-07_13-56-48_xiwl9o.png" alt="Card Image 2">
        <h2 class="card-title">Title 2</h2>
        <p class="card-description">External startups incubated by the Elewa Creative Hub (Tenants, partnerships & small-scale investments)</p>
        <p class="apply-today"><a href="">APPLY TODAY</a></p>
      </div>
    </section>
  </body>
</html>

核心要点 #

• text-indent: 0：彻底禁用首行缩进，确保所有行对齐整齐
• margin: 0 auto：让固定宽度的段落在卡片内居中，避免左右偏移
• white-space: normal：自动根据容器宽度换行，完全不需要手动添加<br>标签
• 清理文本空白：这是解决换行后间距问题的关键，冗余空白会被浏览器渲染成额外空格

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