多行文本显示一行超出不分用“…”代替_一行显示超出部分...代替-CSDN博客

本文链接：https://blog.csdn.net/m0_49378755/article/details/120363829

<!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{
            width: 500px;
            border: 1px solid black;
            text-indent: 2em;           /* 首行缩进2字 */

            /* 下面三个必须搭配使用 */
            overflow: hidden;           /* 超出部分隐藏  */   
            white-space: nowrap;        /* 多行文本在一行显示 */
            text-overflow: ellipsis;    /*   溢出部分用“……”显示   clip 溢出部分裁剪 */
        }

        samp{
            color: red;
            font-weight: bold;
            font-style: italic;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div> <samp>多行文本显示一行超出不分用……代替。</samp>夜晚，微风拂过面颊。那一丝丝的触动让我明白：春，要来了。清晨出门，阳光普照大地，清风和煦，花草树木都来凑热闹，柳树也不例外。她让风帮她挽发，细长的发丝在风手中飘舞。没过多久，雨点滴到了地上。啊！这是春雨！是春天生机的象征！这一场春雨来的真是时候，简直是“好雨知时节，当春乃发生。”居然来的这么准时且恰巧。一声雷响，将世间万物都惊醒。生机勃勃的春天就要回来了。我已经准备好迎接春了。</div>
</body>
</html>