如何使文本不出现在div之外？答案

【问题标题】：How to make text do not appear outside of div?如何使文本不出现在div之外？
【发布时间】：2021-08-12 10:53:50
【问题描述】：

我尝试将溢出设置为隐藏，将自动换行设置为断词，将文本溢出省略号设置为段落，div 包裹段落，div 包裹前面提到的 div。

.card {
  margin: 0 auto;
  width: 300px;
  text-align: left;
  margin-top: 50px;
  white-space: nowrap;
  /* or `pre` */
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
}

.background-image {
  width: 100%;
}

.content {
  margin: 20px;
  position: absolute;
  white-space: nowrap;
  /* or `pre` */
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
}

h1,
p {
  margin: 0;
}

.rating {
  margin-top: 20px;
}

.star {
  width: 20px;
}

.average-rating {
  position: absolute;
  right: -30px;
  top: 59px;
}

.rating-count {
  position: absolute;
  top: 59px;
  right: -72px;
}

.secondary-title {
  margin-top: 20px;
}

.text {
  margin-top: 20px;
  white-space: nowrap;
  /* or `pre` */
  overflow: hidden;
  word-wrap: break-word;
  text-overflow: ellipsis;
}

<div class="card">
  <img src="background.jpg" class="background-image" alt="card-background">
  <div class="content">
    <h1 class='title'>Title</h1>
    <div class="rating">
      <img src="star.png" class="star" alt="Star rating">
      <img src="star.png" class="star" alt="Star rating">
      <img src="star.png" class="star" alt="Star rating">
      <img src="star.png" class="star" alt="Star rating">
      <img src="star.png" class="star" alt="Star rating">
      <p class="average-rating">4.5</p>
      <p class="rating-count">(413)</p>
    </div>
    <p class="secondary-title">Secondary title</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
  </div>
</div>

【问题讨论】：

您不希望.text 出现在哪个 div 之外？是.card、.content 还是.rating？
@Learning 数学除了内容之外，还要卡，因为它们是一样的宽度
@GucciBananaKing99 我在所有段落、包装 div 和包装 div 的 div 上都使用它。
您可以删除.content中的position: absolute;。这能达到你想要的吗？
@LearningMathematics 成功了，谢谢:)

标签： html css frontend

【解决方案1】：

由于绝对位置会将.content 带出文档流，因此它将不再像普通 div 那样占用任何空间。所以.content 占用的空间不再受.card 的限制，导致没有自动换行。因此，删除 position: absolute 就可以了。我删除了几个你不需要的 css 属性，这里是代码：

.card {
  margin: 0 auto;
  width: 300px;
  text-align: left;
  margin-top: 50px;
  /* or `pre` */
}

.background-image {
  width: 100%;
}

.content {
  margin: 20px;
  /* or `pre` */
}

h1,
p {
  margin: 0;
}

.rating {
  margin-top: 20px;
}

.star {
  width: 20px;
}

.average-rating {
  position: absolute;
  right: -30px;
  top: 59px;
}

.rating-count {
  position: absolute;
  top: 59px;
  right: -72px;
}

.secondary-title {
  margin-top: 20px;
}

.text {
  margin-top: 20px;
  /* or `pre` */
}

<div class="card">
  <img src="https://via.placeholder.com/1000" class="background-image" alt="card-background">
  <div class="content">
    <h1 class='title'>Title</h1>
    <div class="rating">
      <img src="https://via.placeholder.com/50" class="star" alt="Star rating">
      <img src="https://via.placeholder.com/50" class="star" alt="Star rating">
      <img src="https://via.placeholder.com/50" class="star" alt="Star rating">
      <img src="https://via.placeholder.com/50" class="star" alt="Star rating">
      <img src="https://via.placeholder.com/50" class="star" alt="Star rating">
      <p class="average-rating">4.5</p>
      <p class="rating-count">(413)</p>
    </div>
    <p class="secondary-title">Secondary title</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
  </div>
</div>

【讨论】：