CSS超出显示…

在网页开发中，经常会遇到文本内容过长，超出容器边界的情况。为了美观和更好的用户体验，我们可以使用CSS来处理这种情况，让超出部分以省略号或其他方式显示，而不是简单地溢出容器。

1. 文本溢出显示省略号

1.1 单行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单行文本溢出显示省略号</title>
<style>
    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
    <div class="ellipsis">sotoolbox.com是一个优质的技术文档网站，提供丰富的学习资源。</div>
</body>
</html>

Output:

1.2 多行文本溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多行文本溢出显示省略号</title>
<style>
    .ellipsis {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        width: 200px;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
    <div class="ellipsis">sotoolbox.com是一个优质的技术文档网站，提供丰富的学习资源。</div>
</body>
</html>

Output:

2. 图片溢出显示省略号

2.1 图片溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片溢出显示省略号</title>
<style>
    .ellipsis {
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    .ellipsis img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
</style>
</head>
<body>
    <div class="ellipsis">
        <img src="https://cdn.sotoolbox.com/css-ellipsis-image.jpg" alt="sotoolbox.com">
    </div>
</body>
</html>

Output:

3. 表格溢出显示省略号

3.1 表格溢出显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格溢出显示省略号</title>
<style>
    table {
        width: 200px;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ccc;
        padding: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
</head>
<body>
    <table>
        <tr>
            <th>标题</th>
            <th>内容</th>
        </tr>
        <tr>
            <td>sotoolbox.com</td>
            <td>是一个优质的技术文档网站，提供丰富的学习资源。</td>
        </tr>
    </table>
</body>
</html>

Output:

4. 溢出显示提示信息

4.1 溢出显示提示信息

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>溢出显示提示信息</title>
<style>
    .ellipsis {
        width: 200px;
        overflow: hidden;
        position: relative;
    }
    .ellipsis::after {
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
        background: white;
        padding: 0 5px;
    }
</style>
</head>
<body>
    <div class="ellipsis" title="sotoolbox.com是一个优质的技术文档网站，提供丰富的学习资源。">
        sotoolbox.com是一个优质的技术文档网站，提供丰富的学习资源。
    </div>
</body>
</html>

Output: