@kirillnf

Как сделать многоточие (прикрепил гифку)?

Я полный ноль и решил скопировать это XViKuoeJFS.gif
и получилось это
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
body{

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap');

background: #3A5FCD;
}
.block{
height: 100%;
max-height:46px;
padding: 15px 15px 15px 70px;
background:#FFFAFA; /* Цвет фона */
position:relative;
box-sizing: border-box;
text-overflow: ellipsis;
line-height: 1.8;
/* работает но не так как надо или я просто тупой 
--------------------------------------------------
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  ---------------------------------------------*/
overflow: hidden;
transition: line-clamp 1s,max-height 0.5s cubic-bezier(0, 1, 0, 1);
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
}

.block:hover{
transition: max-height 1s     ease-in-out;
max-height: 500px;
background: #FFFFFF;


  
  
}
.center{
   height:  26px;
   width: 26px;
   border-radius: 3px;
background: #FFB800;
padding:10px 10px 10px 10px;
position:absolute;
left: 0px;
top: 0px;
}
img {
  margin-left: -2px;
    margin-right: auto;
    margin-top: -3px;
}
.size{
margin:-5px;

}

  </style>
 </head>
 <body>
<div class="block">
   <div class="center">
            <Img src="https://image.flaticon.com/icons/png/512/95/95458.png" Width="30" Height="30">
        </div>
  <p class="size">Текст (от лат. textus — ткань; сплетение, сочетание) — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.

Существуют две основные трактовки понятия «текст»: имманентная (расширенная, философски нагруженная) и репрезентативная (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности..</p>
  </div>
 </body>
</html>

Но как сделать эти многоточие, так и не понял
Можно тыкнуть сюда как вышло у меня
  • Вопрос задан
  • 250 просмотров
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Как-то примерно так:

P.S. Не сразу заметил, что в оригинале hover.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@kirillnf Автор вопроса
Получилось вот так
только анимация дерганая
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы