css: перед видимым, когда переполнение скрыто

Question

есть возможность отобразить что-то еще? когда переполнение скрыто? или может быть мы можем указать, что сторона будет скрыта от переполнения? Например:

.before {
  width: 200px;
  margin: 30px;
  background-color: blue;
  height: 30px;
  position: relative;
}

.before:before {
  content: "221";
  color: blue;
  font-size: 15px;
  display: inline-block;
  position: absolute;
  left: -20px;
  top: -20px;
}

#ex2 {
  overflow: hidden;
}

<div id='ex1' class='before'>Wisible text with css before, more text, more and more... but </div>
<div id='ex2' class='before'>hidden overflow text with css before... more and more text</div>

Answer 1

Если вы объявите элемент с overflow: hidden, он будет применяться ко всему контенту, включая элементы before и after. Невозможно отключить скрытое значение для определенного дочернего элемента.

Подумайте над тем, чтобы обернуть ваш контент в div с максимальной шириной и высотой его родителя, и вместо этого установить oveflow: hidden в этом div. Псевдоэлементы before и after корневого элемента будут существовать вне оболочки, поэтому не будут затронуты.

.before {
  width: 200px;
  margin: 30px;
  background-color: blue;
  height: 30px;
  position: relative;
}

.before:before {
  content: "221";
  color: blue;
  font-size: 15px;
  display: inline-block;
  position: absolute;
  left: -20px;
  top: -20px;
}

#ex2 > .wrapper {
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}

<div id='ex1' class='before'><div class="wrapper">Visible text with css before, more text, more and more... but </div></div>
<div id='ex2' class='before'><div class="wrapper">Hidden overflow text with css before... more and more text</div></div>