Чем отличается overflow: hidden от visibility: hidden?

187
14 июня 2022, 14:50

Разбирал анимацию появления текста и заметил строчку: overflow: hidden - сразу попробовал заменить эту строчку на visibility: hidden чтобы проверить будет ли результат таким же, но результат был уже другим, встал вопрос: чем же они отличаются.

Вот полный код программы:

body {
  margin: 0;
  font-family: 'Courier New', Courier, monospace;
}
.wrap {
  display: flex;
  justify-content: center;
  white-space: nowrap;
  margin-top: 20px;
  margin-bottom: 40px;
}
.text_anim {
  width: 26ch;
  overflow: hidden;
  font-size: 36px;
  animation: text_displaying 5s steps(26) infinite;
  -moz-animation: text_displaying 5s steps(26) infinite;
  -webkit-animation: text_displaying 5s steps(26) infinite;
  -o-animation: text_displaying 5s steps(26) infinite;
}
@keyframes text_displaying {
  from {
    width: 0;
  }
}
@-o-keyframes text_displaying {
  from {
    width: 0;
  }
}
@-webkit-keyframes text_displaying {
  from {
    width: 0;
  }
}
@-moz-keyframes text_displaying {
  from {
    width: 0;
  }
}
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page</title>
</head>
<body>
  <div class="wrap">
    <span class="text_anim">Text-displaying animation.</span>
  </div>
</body>
</html>

Answer 1

Это совершенно разные свойства. Overflow управляет переполнением элемента (т.е. тем, как будут отображаться дочерние элементы, если они выходит за пределы родителя), а visibility - видимостью самого элемента.

READ ALSO
Отключается CSS в письмах Mail.ru
HTML

Отключается CSS в письмах Mail.ru

Верстаю html-письмоПри отладке вёрстки возникла проблема в почте Mail

 163
Как лучше всего сделать такую кнопку?
HTML

Как лучше всего сделать такую кнопку?

 222
CMS для интернет-магазина, в которую легко дабавить свой HTML/CSS
HTML

CMS для интернет-магазина, в которую легко дабавить свой HTML/CSS

Есть готовый макет интернет-магазина на HTML/CSSПытался реализовать его на WordPress, однако я не знаю, как создать там свою тему, нет навыков работы...

 269
Помогите разобраться с выводом результатов php
HTML

Помогите разобраться с выводом результатов php

На сайте есть цикл вывода статей из-записейНе могу разобраться почему цикл выводит только 9 статей (всего статей 15) Как это можно настроить

 143