用CSS实现文本过长自动隐藏的代码

发布时间：2023-11-03 14:35:06 所属栏目：语言来源：

导读：本篇内容介绍了“用CSS实现文本过长自动隐藏的代码是什么”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅

本篇内容介绍了“用CSS实现文本过长自动隐藏的代码是什么”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

单行

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

多行(兼容各个浏览器)//通过覆盖最后几个字的形式

p{

position:relative;

line-height:1.4em;

height:4.2em;/* 3 倍line-height 多少倍就是多少行*/

overflow:hidden;

}

.p::after {

content:"...";

font-weight:bold;

position:absolute;

bottom:0;

right:0;

padding:0 20px 1px 45px;

background: -webkit-linear-gradient(left, transparent, #fff 55%);

background: -o-linear-gradient(right, transparent, #fff 55%);

background: -moz-linear-gradient(right, transparent, #fff 55%);

background: linear-gradient(to right, transparent, #fff 55%);

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!