Почему текст, помещенный внутри элемента label, не выходит за границы родительского элемента, но при этом действие при наведении на него все равно срабатывает?

Поведение, которое вы описываете, связано с тем, что по умолчанию элемент label ассоциируется с элементом формы, на который он ссылается с помощью атрибута `for` или с помощью вложения элементов. 

Когда вы наводите курсор на текст внутри элемента label, браузер автоматически обрабатывает это как наведение на соответствующий элемент формы, с которым связан label. В результате происходят необходимые действия, такие как подсветка поля ввода или активация/фокус на элементе формы.

Если вы хотите, чтобы курсор не становился наведенным на label, когда текст внутри него выходит за пределы родительского элемента, вам необходимо использовать CSS-свойство `pointer-events` и установить его значение в `none` для элемента label. Например:

```css
label {
  pointer-events: none;
}
```

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

.position: relative;
.width: 150px;
.height: 150px;
.border-radius: 50%;
.clip-path: circle(50%); 

 + - border-radius: 50%; & overflow: hidden;