0

Фронты спасайте.

У меня в шаблоне есть фото товара, у товара название может быть очень длинным и будет размещаться на 2-3-n строках. Нужно сделать так, что бы текст занимал только 1 строку, и перед самым концом блока типа исчезал\затухал как бы.

Нашел варианты с ... на конце, но вот с затуханием как то не очень

1 ответ 1

1

Пример

.text {
  white-space: nowrap;
  overflow: hidden;
  max-width: 400px;
  position: relative;
  border: 1px solid #ccc;
}

.text::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
}
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae eum dolores minus alias ab, voluptatem voluptatum veniam provident ex, consectetur numquam id possimus! Dicta fugiat, facere officiis, consequatur tenetur nisi.</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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