HTML文字溢出显示...

最新推荐文章于 2024-04-13 16:49:16 发布

Xiaaoke

最新推荐文章于 2024-04-13 16:49:16 发布

阅读量4.4k

点赞数 5

分类专栏： # HTML # CSS 文章标签： js css html 溢出显示... 多行溢出

如有争议，各抒己见；如有侵权，联系改之。

本文链接：https://blog.csdn.net/qq_45007419/article/details/107163724

版权

CSS 同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

单行溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 45px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>明德慎罚没事的麻烦啊没地方马尔默阿萨德麻烦啊额买的方案</p>
</body>
</html>

确定的宽度
white-space: nowrap;（不换行）
overflow: hidden;（溢出不显示）
text-overflow: ellipsis;（文本溢出显示…）

多行溢出

必须是拥有webkit内核的浏览器才行（兼容性）

多行溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 45px;
            border: 1px solid red;
            display: -webkit-box;
            -webkit-line-clamp: 2;/* 行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>明德慎罚没事的麻烦啊没地方马尔默阿萨德麻烦啊额买的方案</p>
</body>
</html>

确定的宽度
display: -webkit-box;
-webkit-line-clamp: 2;（自定义行数）
-webkit-box-orient: vertical;
overflow: hidden;（溢出不显示）
text-overflow: ellipsis;（文本溢出显示…）

利用插件Clamp.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            width: 200px;
            height: 45px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <p>明德慎罚没事的麻烦啊没地方马尔默阿萨德麻烦啊额买的方案明德慎罚没事的麻烦啊没地方马尔默阿萨德麻烦啊额买的方案</p>
    <!-- 引用GitHub上面下载下来的clamp.js文件 -->
    <script src="./clamp.js"></script>
    <script>
        // 获取元素
        var p = document.getElementsByTagName('p')[0];
        // 第一个参数：元素对象
        // 第二个参数：需要在哪一行溢出
        $clamp(p, {clamp: 2});
    </script>
</body>
</html>

GitHub地址：Clamp.js
或者是支持一下小编：Clamp.js

Xiaaoke

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML文字溢出显示...

单行溢出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{
复制链接

扫一扫