0

Сейчас 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>

1 ответ 1

1

Так?

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

2
  • Да, это именно то, чего я добивался. Зачем дописывать width: 100% если и без этого работает? Могут быть проблемы в разных браузерах или что? Мне очень важно чтобы на старых мобильных телефонах работало. 9 сен 2019 в 17:03
  • без width:100% могут быть проблемы с изображением, которое МЕНЬШЕ предназначенного для него места. а насчет работоспособности в разных старых браузерах - проверьте это свойство на caniuse.com 10 сен 2019 в 10:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.