javascript - 如何使文本不超出 div

问题描述

html 卡片如下所示：

<li class="col-md-4">
  <div class="categorylist-item">
    <a class="cid-201728169" href="xxxxxxxx">
      <h4>Backoffice</h4>
      <div class="linebreak"></div>
      <p class="description">Ordrar, leveranser, inventering, kampanjer, bokföring m.m.</p> 
      <!--<p class="readmore">Läs mer</p>-->
    </a>
  </div>
</li>

.container.home .categorylist-item h4 {
  font-size: 25px;
    font-weight: bold;
  margin-bottom: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container.home .categorylist-item .description {
  display: none;
  font-size: 18px;
  font-weight:400;
  margin-top:15px;
}

.container.home .categorylist-item:hover .description {
  display: block;
}

.container.home .categorylist-item .readmore {
  font-size: 16px;
    font-weight: 500;
  color: #212529;
  display:none;
}

.container.home .categorylist-item:hover .readmore {
  display:block;
}

.container.home .categorylist-item .readmore:after {
  content: " \00bb";
}

/*Columns on startpage transitions*/

.categorylist-item .cid-201728169 { /*First column transition*/
    -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
  transition: .5s;
}

.categorylist-item:hover .cid-201728169,/*First column transition*/
.categorylist-item .cid-201728169 {
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

不要费心去运行它...

一个简单的可视化：

这是当您不悬停卡片时：

当您将卡片悬停时：

问题是：

标签（描述）在p盒子外面。

如何使文本不超出 div ..？

有任何想法吗？

标签： javascripthtmlcss

要回答您的问题“我如何使文本不超出 div”，您可以overflow : hidden在容器上设置描述。这将防止文本超出容器。这将导致元素在违反边界时溢出并隐藏在其边界框下。即使超出范围也不会显示滚动条，但内容将是可滚动的。

虽然这不是一个理想的解决方案。如果描述越界并且用户可能不知道滚动到它上面来阅读它，那么描述将被完全或部分隐藏。

对您来说最好的解决方案是调整元素的大小/边距/填充，以便有足够的空间用于描述。

javascript - 如何使文本不超出 div

问题描述

解决方案

推荐阅读