文本溢出显示省略号

最新推荐文章于 2024-07-30 10:56:44 发布

脆皮煎蛋

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量206

点赞数

文章标签： html javascript servlet

本文链接：https://blog.csdn.net/m0_73304951/article/details/126818454

版权

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

方法1：省略号

单行文本： width：200px；设置盒子的宽度(限制宽度) white-space：nowrap；设置文本不换行 overflow：hidden；溢出隐藏 text-overflow：ellipsis；文本溢出的显示省略号

<style>
.box{
    width:200px;
    background-color:red;
    height:40px;
    line-height:40px;
    /* 关键代码 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
    overflow: hidden; /* 溢出隐藏 */
    white-space: nowrap;  /* 强制不换行 */
}
</style>

<body>
<div class="box">MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰带 38157</div> 
</body>

方法2：伪元素

<style>
    .box {
        width: 200px;
        height: 40px;
        line-height: 40px;
        background-color: orchid;

        overflow: hidden;/* 溢出隐藏 */
        white-space: nowrap;/* 强制不换行 */
        position: relative;/* 子绝父相 */

    }
    .box:after {
        content: "...";
        position: absolute;
        right: 0px;
        bottom: 0px;
        /* 设置宽度可以微调省略号的盒子大小，盖住多余的文字 */
        width: 20px;
        background-color: red;
    }
</style>
</head>

<body>
    <div class="box">
        可以沉迷，可以抱怨，可以奔溃，可以抱怨，可以奔溃，人要有自愈能力
    </div>
</body>

2、多行文本溢出显示省略号

方法1：伪元素

  <style>
        .box {
            width: 200px;
            /* 通过行高和高度控制显示的行数 */
            height: 120px;
            line-height: 30px;

            background-color: red;
            position: relative;
            /* 文本两端对齐方式 */
            text-align: justify;
            /* 溢出隐藏 */
            overflow: hidden;

        }

        .box:after {
            content: "...";
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: red;

            width: 16px;
        }
    </style>
<body>
    <div class="box">簇拥烈日的花</div>
</body>

方法2：弹性盒

width：200px；设置盒子的宽度(限制宽度) display：-webkit-box；将对象作为弹性伸缩盒子模型显示 -webkit-line-clamp：2；用来限制在一个快元素显示的文本行数 -webkit-box-orient：vertical；设置或检索伸缩盒对象的子元素的排列方式

overflow：hidden；溢出隐藏

<!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>
.box{
background-color: pink;
/* 1.给盒子设置宽高 */
width: 300px;
/* 2.设置旧版弹性盒 */
display: -webkit-box;
/* 3.设置行数 */
-webkit-line-clamp: 3;
/* 4.设置子元素的排列方式垂直排列 */
-webkit-box-orient: vertical;
/* 5.溢出隐藏 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
玫瑰花的葬礼
埋葬关于你的回忆
感觉双手麻痹
不能自已
已拉不住你
真的好美丽
那天的烟花雨
我说要娶穿碎花洋裙的你
玫瑰花的葬礼
埋葬深深爱着的你
残朵停止呼吸
渗入大地
没人会注意
一片小雨滴
陪着我等天明
我用这最后一分钟怀念你
我在夜幕笼罩的天桥上潜行
每一级阶梯
都留着你我昔日印迹
温存迷醉吵闹清醒
都还在我的脚畔
兜兜兜兜兜转不清
没来得及把红色玫瑰递给你
爱就像是一场雨
已经离我而去
你说过
太过鲜艳的爱情终将凋零
</div>
</body>

脆皮煎蛋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本溢出显示省略号

文本溢出显示省略号
复制链接

扫一扫

<!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>
	.box{
	background-color: pink;
	/* 1.给盒子设置宽高 */
	width: 300px;
	/* 2.设置旧版弹性盒 */
	display: -webkit-box;
	/* 3.设置行数 */
	-webkit-line-clamp: 3;
	/* 4.设置子元素的排列方式垂直排列 */
	-webkit-box-orient: vertical;
	/* 5.溢出隐藏 */
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<div class="box">

	玫瑰花的葬礼

	埋葬关于你的回忆

	感觉双手麻痹

	不能自已

	已拉不住你



	真的好美丽

	那天的烟花雨



	我说要娶穿碎花洋裙的你



	玫瑰花的葬礼

	埋葬深深爱着的你



	残朵停止呼吸

	渗入大地

	没人会注意



	一片小雨滴

	陪着我等天明



	我用这最后一分钟怀念你



	我在夜幕笼罩的天桥上潜行

	每一级阶梯

	都留着你我昔日印迹

	温存迷醉吵闹清醒

	都还在我的脚畔

	兜兜兜兜兜转不清

	没来得及把红色玫瑰递给你

	爱就像是一场雨

	已经离我而去

	你说过

	太过鲜艳的爱情终将凋零
	</div>
	</body>