css 如何使文本移动到新行而不缩进或不使用< br>

mv1qrgav 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(132)

我正在处理这一节，我尽量不对文本使用换行符，但由于某种原因，当我的文本移动到新行时，它是有间距的。我希望它是相等的，没有任何缩进。文本应该保持在定义的宽度内。
enter image description here
这是我目前所拥有的。我尝试了一些方法来调整CSS，但是没有一个奏效。请随意摆弄代码。

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

      .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) {
        /* For tablets */
        .card {
          flex: 0 0 100%;
          margin-bottom: 20px;
        }
      }

      @media only screen and (max-width: 480px) {
        /* For mobile phones */
        .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>

css

来源：https://stackoverflow.com/questions/75667388/how-can-i-have-text-move-to-a-new-line-without-an-indent-or-without-the-use-of

1条答案

按热度按时间

fdbelqdn1#

如果您仍然希望h1和其他所有对象居中，请将text-align: left添加到.card-description的规则中：
评论后编辑/添加：此外，将.card-description的width限制为与图像相同的量（即50%），并通过添加margin: 0 auto;将其居中
(BTW：是否将text-align: center保留在.card的规则中，取决于您希望h1标题和“apply”按钮居中还是左对齐。如果您希望它们左对齐，您可以删除该设置，但之后您还应该将width: 50%添加到它们的CSS规则中。

.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: 50%;
  margin: 0 auto;
  padding-bottom: 1.4rem;
  font-size: 1.2rem;
  text-align: left;
}

.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) {
  /* For tablets */
  .card {
    flex: 0 0 100%;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 480px) {
  /* For mobile phones */
  .card {
    flex: 0 0 100%;
    margin-bottom: 20px;
  }
  .card img {
    width: 100%;
  }
  .card-title {
    font-size: 20px;
  }
  .card-description {
    font-size: 16px;
  }
}

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

赞(0）回复(0）举报 2023-03-14

我来回答

css 如何使文本移动到新行而不缩进或不使用< br>

1条答案

相关问题

热门标签

最新问答