- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- 用CSS实现文本过长自动隐藏的代码是什么
用CSS实现文本过长自动隐藏的代码是什么
Admin 2022-07-09 群英技术资讯 592 次浏览
本篇内容介绍了“用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%);
}
效果如下
总结
到此这篇关于“用CSS实现文本过长自动隐藏的代码是什么”的文章就介绍到这了,更多相关用CSS实现文本过长自动隐藏的代码是什么内容，欢迎关注群英网络技术资讯频道，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
如何用HTML+CSS做个基础的下拉菜单，技术要点有哪些
这篇文章主要介绍了HTML+CSS实现下拉菜单的实现的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
-
CSS框架开发有什么优点呢？
CSS框架开发有什么优点呢？有不少朋友对此感兴趣，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。
-
用CSS3如何写一个LED数字时钟效果
这篇文章主要介绍了css3一个简易的 LED 数字时钟实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
CSS中怎么样用滤镜的方式去做圆角和波浪效果
怎么利用CSS实现圆角及波浪效果？下面本篇文章带大家了解一下怎么巧用CSS滤镜构建圆角及波浪效果，希望对大家有所帮助！
-
CSS中虚线框怎样实现，有几种方法
css中虚线框怎么表示在css中虚线框有两种表示方法。1、利用border-style: dashed;样式，示例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
