CSS3 文本溢出 | 开创者教程

实例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>开创者教程(kaicz.com)</title>
    <style>
        .example2 {
            white-space: nowrap;
        	overflow: hidden;
        	text-overflow: ellipsis;
        }
        
        .example3 {
            white-space: nowrap;
        	overflow: hidden;
        	text-overflow: clip;
        }
        
        .example4 {
            white-space: nowrap;
        	overflow: hidden;
        	text-overflow: " [..]";
        }
        
        .example5 {
            display: -webkit-box;
        	-webkit-line-clamp: 2; /* 限制显示行数 */
        	-webkit-box-orient: vertical;
        	overflow: hidden;
        	text-overflow: ellipsis;
        }
        
        div{
        	width: 300px;
            height: 100px;
            border-radius: 10px;
            padding: 15px;
            background-color: #4a90e2;
            color:#fff;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <h1>CSS3 文本溢出</h1>
    <div>
        <strong>默认溢出（无处理）</strong>
        <p>这是一段超长的文本内容，超出容器宽度时会正常溢出显示。</p>
    </div>
    <div>
        <strong>ellipsis（省略号）</strong>
        <p class="example2">这是一段超长的文本内容，超出部分会显示为省略号（...）。</p>
    </div>
    <div class="text-overflow text-overflow3">
        <strong>clip（直接裁剪）</strong>
        <p class="example3">这是一段超长的文本内容，超出部分会被直接裁剪掉。</p>
    </div>
    <div class="text-overflow text-overflow4">
        <strong>自定义字符串（仅部分浏览器支持）</strong>
        <p class="example4">这是一段超长的文本内容，理论上会显示自定义标记（但大多数浏览器不支持）。</p>
    </div>
    <div class="text-overflow text-overflow5">
        <strong>-webkit-line-clamp（多行省略）</strong>
        <p class="example5">这是一段超长的多行文本内容，通过非标准属性 -webkit-line-clamp 实现多行省略效果。需要结合 display: -webkit-box 使用。</p>
    </div>
</body>

</html>