伪元素被溢出隐藏：已隐藏。如何解决？

Question

我正在尝试制作一个带有消息框的气球，但是由于消息可能很大，我使用了文本溢出和隐藏的溢出，只有这种隐藏的溢出会使我的伪元素消失或不被排除在外。箭头，如何使此伪元素不受此溢出影响，否则它仍然会出现，因为如果我执行隐藏的溢出操作，则文本溢出将不起作用。

Here's how it looks

Here's how I wanted it to look, I would change the color to white later

这是我的代码

 #alert-user-message{
  min-width: 3rem;
  min-height: 2rem;
  max-width: 700px;
  max-height: 600px;
  margin-top: -195px;
  padding: 1rem;
  font-size: 0.8em;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;

}

#alert-user-message:before{
  content:"\A";
  top: -1rem;
  left: calc(50% - 2rem);
  border-style: solid;
  border-width: 0 2rem 2rem 2rem;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  margin-top: 5px;
}

如果有人可以帮助我解决该问题或提供任何提示，我将非常感激。

Answer 1

使div周围的容器溢出，就像这样：