如何显示未读标识的小红点？

Question

如题
移动端页面，现在在写消息通知，需要在消息结尾处加上一个小红点，标识未读。
下面是可运行样式

<div class="content-article">
<span class="article-title">这是通知消息的标题<i class="unread-point"></i></span>
</div>

.content-article {
            // 超出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .article-title {
                font-size: 28rem;
                position: relative;
            }
            // 消息未读状态(红色提示点)
            .unread-point {
                display: block;
                background: #f23436;
                border-radius: 50%;
                width: 14rem;
                height: 14rem;
                top: 0;
                right: -9rem;
                position: absolute;
            }
}

但是消息标题过多，超出隐藏之后，小红点也会被隐藏，该如何解决这个问题？

Answer 1

https://jsbin.com/yetiziyaqa/...
https://jsbin.com/horutaneco/...
省略的和红点分开

Answer 2

.article-title 加上 padding-right:14rem; 14rem就是.unread-point的width

.article-title {
           font-size: 28rem;
           position: relative;
           padding-right:14rem;
}

Answer 3

利用css的calc属性计算：
文字最大宽度 = 容器宽度 - 红点宽度

<div class="content-article">
    <span class="article-title">
        这是通知消息的标题
    </span>
    <i class="unread-point"></i>
</div>
<style>
    .unread-point {
        width: 10px;
        height: 10px;
        display: inline-block;
    }
    .article-title {
        display: inline-block;
        max-width: calc(100% - 10px);
    }
</style>