text-overflow 文本溢出显示省略号总结

用户9914333

发布于 2023-02-28 09:24:24

1.2K0

发布于 2023-02-28 09:24:24

文章被收录于专栏：bug收集

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

本文将介绍： “ 单行文本与多行文本显示省略号的方法 ”

1. 单行文本溢出显示省略号

核心代码：

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

注：单词与中文会自动换行，要实现单行溢出显示，必须让它不换行，使用white-space: nowrap; 可以让它不换行

效果如下：

代码如下：

<!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>Document</title>
    <style>
        p {
            border: 1px solid red;
            width: 200px;
            height: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
</style>
</head>
<body>
        <p>
            这是一个段落这是一个段落这落是一个段落这是一个段
        </p>
</body>
</html>

2. 指定行数超出显示省略号

核心代码：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 4;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box; 对象作为弹性伸缩盒子模型。-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式。 -webkit-line-clamp: 4; 设置元素最多显示行数，父元素需填写宽度才明显

效果如下：

代码如下：

<!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>Document</title>
    <style>
        div {
            border: 1px solid red;
            width: 200px;
            height: 180px;
        }
        p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            text-overflow: ellipsis;
        }
</style>
</head>
<body>
    <div>
        <p>
            这是一个段落这是一个段落这落是一个段落这是一个段
            是一个段落这是一个段
            是一个段落这是一个段
            是一个段落这是一个段
            是一个段落这是一个段
            是一个段落这是一个段
        </p>
    </div>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-12-28，如有侵权请联系 cloudcommunity@tencent.com 删除

html