css3 auto middle ellipsis 中间文本超出...显示css3 auto middle ellip

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con {
            font-size: 14px;
            color: #666;
            width: 600px;
            margin: 50px auto;
            border-radius: 8px;
            padding: 15px;
            overflow: hidden;
            resize: horizontal;
            box-shadow: 20px 20px 60px #bebebe,
                -20px -20px 60px #ffffff;
        }

        .wrap {
            position: relative;
            line-height: 2;
            height: 2em;
            padding: 0 10px;
            overflow: hidden;
            background: #fff;
            margin: 5px 0;
        }

        .wrap:nth-child(odd) {
            background: #f5f5f5;
        }

        .title {
            display: block;
            position: relative;
            background: inherit;
            text-align: justify;
            height: 2em;
            overflow: hidden;
            top: -4em;
        }

        .txt {
            display: block;
            max-height: 4em;
        }

        .title::before {
            content: attr(title);
            width: 50%;
            float: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            direction: rtl;
        }
    </style>
</head>

<body>
    <ul class="con">
        <li class="wrap">
            <span class="txt">CSS3 文案内容内容内容呀哈哈哈 2024年10月8日</span>
            <span class="title" title="CSS 实现优惠券的技巧 - 2021-03-26">CSS3 测试内容文本内容测试内容 2024年10月08日</span>
        </li>
        <li class="wrap">
            <span class="txt">CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，测试标题，超长内容</span>
            <span class="title" title="CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧-2024年10月08日">CSS
                测试标题，这是一个稍微有点长的标题内容呀，超出一行以后才会有tip提示，标题是哈哈哈哈哈哈哈提示内容</span>
        </li>
        <li class="wrap">
            <span class="txt">CSS3 内容填写内容?</span>
            <span class="title" title="CSS3 内容填写内容">CSS3 内容填写内容</span>
        </li>
        <li class="wrap">
            <span class="txt">CSS 文本超出自动显示title提示内容</span>
            <span class="title" title="CSS 文本超出自动显示title">CSS 文本超出自动显示title超出提示内容显示</span>
        </li>
    </ul>
</body>

</html>