Question

我有一个目录，我希望将图像保留在最左侧并将文本居中，但是当文本太大时，它将与左侧的图像重叠。我想避免这种情况的发生，有什么办法吗？请记住，我正在完成别人设计的项目，所以我不想进行重大更改。

HTML：

<td class="text-center cart-product">
   <h2>
      <div>
         <img src="{{ item.product.image.url }}" alt="{{ item.product.title }}">
      </div>                        
      <div>
         <a>{{ item.product.title }}</a>
      </div>
   </h2>
</td>

CSS：

.cart-product h2 a {
  color: #d85044;
  font-size: 20px;
  margin-left: -70px;
}

.cart-product img {
  height: 50px;
  width: 50px;
  margin-left: 10px;
  margin-right: 10px; 
}

.cart-product h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  display: grid;
  grid-template-columns: 70px auto;
}

Answer 1

您已经关闭。我建议您看一下可能对您的项目有帮助的三个CSS属性。

overflow-wrap: break-word;

break-word: break-all;

word-wrap: break-word;

分别尝试每个属性，并知道可用于每个属性的正确值，以测试哪个值最合适。

Answer 2

仍不确定我是否了解这种情况，但是您可以在文本上添加滚动条，并使用

使其保持合理的宽度。

#txt {
    overflow: scroll;
    width: 300px;
}

，然后确保在正确的标记中添加ID

<div id="txt">
     <a>{{ item.product.title }}</a>
</div>

防止文字与div重叠

2 个答案: