CSS - 溢出：隐藏在<a> tags still result in a clickable </a> <a> tag

Question

I have the issue that all my links are clickable when I added overflow: hidden. I guess this is expected behavior, but I couldn't figure out how to constantly not allow clicking after the overflow happens.

HTML:

<div id="popup" class="new_pages">
    <p>There is/are 3 new article(s) available:
        <a href="www.example.com">Article001</a>,
        <a href="www.example.com">Article002</a>,
        <a href="www.example.com">Article003</a>
        <i onclick="hideMe()" class="fa fa-times close_new_pages" aria-hidden="true"></i>
    </p>
</div>

The CSS of the <p> element looks something like this:

div.new_pages p {
    padding-right: 40px;
    padding-left: 15px;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

The result looks something like this:

在这个截图中，我在X符号后面徘徊 我想要一些像display: none这样的选项，但只能在溢出之后。

有没有解决方案？