css字体超出隐藏

CSS字体超出隐藏基础概念

CSS中的字体超出隐藏是指当文本内容超出了其容器的宽度时，通过CSS样式来控制文本的显示方式，以避免内容溢出容器边界。这通常用于保持页面布局的整洁和美观。

类型

文本溢出隐藏：使用 overflow 属性来隐藏溢出的文本。
文本截断：使用 text-overflow 属性来截断溢出的文本，并显示省略号。
单行文本溢出隐藏：结合 white-space 和 overflow 属性来实现单行文本的溢出隐藏。
多行文本溢出隐藏：使用 -webkit-line-clamp 属性来限制多行文本的显示行数。

应用场景

导航栏：在导航栏中，通常需要显示较长的菜单项，但又不希望它们破坏布局。
卡片布局：在卡片布局中，内容可能很长，但需要限制显示的行数。
列表项：在列表中，每个列表项的内容可能很长，但需要保持列表的整洁。

示例代码

单行文本溢出隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Overflow Example</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #000;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        This is a very long text that will be truncated if it exceeds the container width.
    </div>
</body>
</html>

多行文本溢出隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-line Text Overflow Example</title>
    <style>
        .container {
            width: 200px;
            border: 1px solid #000;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        This is a very long text that will be truncated after two lines if it exceeds the container width. This is a very long text that will be truncated after two lines if it exceeds the container width.
    </div>
</body>
</html>