超长溢出头部省略打点，坑这么大，技巧这么多？

2023-04-27 14:02 Bryran 阅读(9) 评论(0) 编辑收藏举报

方案一：两次 `direction` 反转

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-top: 4px;
            background-color: #bdc3c7
        }

        .m-b-12 {
            margin-bottom: 12px;
        }

        .w180 {
            width: 180px;
        }

        .g-twice-reverse {
            overflow: hidden;
            text-overflow: ellipsis;
            direction: rtl;
            white-space: nowrap;
        }

        .g-twice-reverse>span {
            direction: ltr;
            unicode-bidi: bidi-override;
        }

    </style>
</head>

<body>
    初始内容:
    <div class="m-b-12">13993199751_18037893546_4477656</div>

    省略后内容:
    <div class='w180 g-twice-reverse'>
        <span>13993199751_18037893546_4477656</span>
    </div>


</body>

</html>

套两层direction

方案二：通过伪元素破坏其纯数字的性质、

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-top: 4px;
            background-color: #bdc3c7
        }

        .m-b-12 {
            margin-bottom: 12px;
        }

        .w180 {
            width: 180px;
        }

        .g-add-letter {
            overflow: hidden;
            text-overflow: ellipsis;
            direction: rtl;
            white-space: nowrap;
        }

        .g-add-letter>span::before {
            content: "a";
            opacity: 0;
            font-size: 0;
        }
    </style>
</head>

<body>
    初始内容:
    <div class="m-b-12">13993199751_18037893546_4477656</div>

    省略后内容:
    <div class='w180 g-add-letter'>
        <span>13993199751_18037893546_4477656</span>
    </div>


</body>

</html>

添加伪类

方案三：通过 `\200e` LRM 标记位

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-top: 4px;
            background-color: #bdc3c7
        }

        .m-b-12 {
            margin-bottom: 12px;
        }

        .w180 {
            width: 180px;
        }

        .g-add-letter {
            overflow: hidden;
            text-overflow: ellipsis;
            direction: rtl;
            white-space: nowrap;
        }

        .g-add-letter>span::before {
            content: "\200e";
            opacity: 0;
            font-size: 0;
        }
    </style>
</head>

<body>
    初始内容:
    <div class="m-b-12">13993199751_18037893546_4477656</div>

    省略后内容:
    <div class='w180 g-add-letter'>
        <span>13993199751_18037893546_4477656</span>
    </div>


</body>

</html>

View Code

方案四：通过 `<bdi>` 标签

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-top: 4px;
            background-color: #bdc3c7
        }

        .m-b-12 {
            margin-bottom: 12px;
        }

        .w180 {
            width: 180px;
        }

        .g-bid {
            overflow: hidden;
            text-overflow: ellipsis;
            direction: rtl;
            white-space: nowrap;
        }

    
    </style>
</head>

<body>
    初始内容:
    <div class="m-b-12">13993199751_18037893546_4477656</div>

    省略后内容:
    <div class='w180 g-bid'>
        <bdi dir="ltr">13993199751_18037893546_4477656</bdi>
    </div>


</body>

</html>