多行文本省略号 – 源码巴士

<!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>哭泣小丑【求生者】</title>
    <style>

        div{
            /* 调整每个字符直接的间隔 */
            /* letter-spacing: 5px; */
            /* 调整单词直接的间隔 */
            /* word-spacing: 50px; */
            /* 需要注意一点 
            文本超出盒子的宽度是会默认换行的 默认值为normal
            */
            width: 300px;
            height: 100px;
            background-color: brown;
            border: 1px solid grey;
            
            display: -webkit-box;
            /* -webkit为了浏览器兼容而写的 */
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 3;
            /* 在第N行的时候  变为省略号 N为可控变量*/
            -webkit-box-orient: vertical;
        }

    </style>
</head>

<body>
    <div>
        <p>　　①火箭冲刺10s的持续时间较久，且火箭冲刺移速比监管步行稍快。适合用来转点、拉点时使用。</p>

        <p>　　②火箭冲刺的冷却时间长达20s，且转弯灵活度较低，介于这一特质，在板区或地形复杂的区域必定需绕路或躲避，无法依附于模型，大大影响火箭冲刺的距离，不建议侦探们在复杂地形使用此技能牵制监管者。</p>

        <p>　　③靠近墙体时可利用冲刺初始约0.5s不会被断锯的技能特性调整方向，尝试拉开距离。</p>

        <p>　　④面对监管者雕刻家需注意躲避雕像，当冲刺碰到移动中雕像会直接判定冲刺被打断。</p>

        <p>　　⑤每次使用火箭冲刺有一次额外加速机会，利用此技能在面对监管（如邦邦的炸弹，”使徒“的扑袭）时可以灵活使用加速，逃脱出技能范围的同时与监管者拉开身位，令监管者的追击和拦截功亏一篑。但需注意加速技能使用期间无法转向，把握好冲刺技能释放位置与朝向是达成完美牵制的诀窍！</p>

        <p>Who are you ？</p>

        

    </div>
</body>

</html>
关键代码：
效果如下：
原文链接：https://blog.csdn.net/weixin_57936267/article/details/126487363