主页 / 问题 / 1021736
Accepted
Родион Поляков
Asked:2020-09-09 19:44:30 +0000 UTC2020-09-09 19:44:30 +0000 UTC

如何应用文本溢出？

  • 772

现在text-overflow应用于.product，因为只有这个元素有宽度限制。因此，文本被截断，但不替换末尾的省略号。需要剪掉比这更宽的文本，.into并在末尾替换一个省略号。问题是它.into没有宽度限制。另外，您需要申请text-overflow内部标签<p>。有任何想法吗？

.catalog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.product {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info {
    padding-top: 10px;
    padding-bottom: 10px;
}
.info .name {
    font-weight: 600;
}

.info > .name,
.info > .price {
    margin-bottom: 0;
}
<div class="catalog">
    <div class="product">
        <div class="info">
            <p class="name">Наименование</p>
            <p class="price">456 руб.</p>
        </div>
    </div>
</div>

css

1 个回答

  1. Best Answer

    所以？

    .catalog {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.product {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.info {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}

.info .name {
  font-weight: 600;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info>.name,
.info>.price {
  margin-bottom: 0;
}
    <div class="catalog">
  <div class="product">
    <div class="info">
      <p class="name">НаименованиеОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекстОченьДлинныйТекст</p>
      <p class="price">456 руб.</p>
    </div>
  </div>
</div>

    • 1

相关问题