单行(多行)文字溢出以省略号显示

最新推荐文章于 2024-07-17 18:42:40 发布

阿渡渡渡渡渡渡

最新推荐文章于 2024-07-17 18:42:40 发布

阅读量594

点赞数

分类专栏： html/css 文章标签： html css

本文链接：https://blog.csdn.net/qq_44867271/article/details/106615323

版权

html/css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先看单行

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
        div{
            width: 150px;
            height: 80px;
            background-color: skyblue;
            margin: 100px auto;
            /* white-space 文字显示不开自动换行 */
            /* white-space: normal; */

            white-space: nowrap;  /* 强制一行内显示*/
            overflow: hidden; /* 溢出部分隐藏 */
            text-overflow: ellipsis; /* 文字溢出部分省略号显示 */
        }
    </style>
</head>

<body>
    <div>大家啊科利达回复了哈弗拉菲克拉夫哈佛返回</div>
</body>
</html>

white-space: nowrap; /* 强制一行内显示*/
overflow: hidden; /* 溢出部分隐藏 /
text-overflow: ellipsis; / 文字溢出部分省略号显示 */

在这里插入图片描述

然后看多行

此方法存在很大的兼容性问题，适用于 webkit 浏览器和移动端（移动端大部分是webkit 内核）

<!DOCTYPE html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>兼容性问题较大，适合于webkit浏览器和移动端（移动端大部分是webkit内核）</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <style>
        div{
            width: 150px;
            height: 45px;
            background-color: skyblue;
            margin: 100px auto;

            overflow: hidden; /* 溢出部分隐藏 */
            text-overflow: ellipsis; /* 文字溢出部分省略号显示 */
            display: -webkit-box; /* 弹性伸缩盒子模型显示 */
            -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
            -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
        }
    </style>
</head>

<body>
    <div>大家啊科利达回复了哈弗拉菲克拉夫哈佛发骄傲和</div>
</body>

</html>

overflow: hidden; /* 溢出部分隐藏 /
text-overflow: ellipsis; / 文字溢出部分省略号显示 /
display: -webkit-box; / 弹性伸缩盒子模型显示 /
-webkit-line-clamp: 2; / 限制在一个块元素显示的文本的行数 /
-webkit-box-orient: vertical; / 设置或检索伸缩盒对象的子元素的排列方式 */

在这里插入图片描述

阿渡渡渡渡渡渡

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
单行(多行)文字溢出以省略号显示

首先看单行<!DOCTYPE html><html class="no-js"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <met
复制链接

扫一扫