Jtti广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >css3溢出隐藏的方法
  • 34
分享到

css3溢出隐藏的方法

2015-09-12 00:09:06 34人浏览 佚名
摘要

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow: hidden; text-overflow:elli

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -WEBkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

适用范围:

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  • -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

  • display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

  • -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

实现方法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
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%);
}

适用范围:

该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

  1. 将height设置为line-height的整数倍,防止超出的文字露出。

  2. 给p::after添加渐变背景可避免文字只显示一半。

  3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:…);兼容ie8需要将::after替换成:after。

以上所述是小编给大家介绍的css3溢出隐藏的方法,希望对大家有所帮助。在此也非常感谢大家对编程界网站的支持!

--结束END--

本文标题: css3溢出隐藏的方法

本文链接: https://www.lsjlt.com/news/104.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css3溢出隐藏的方法是什么
    这篇文章给大家介绍css3溢出隐藏的方法是什么,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度widt...
    828
    2023-09-27
  • css实现溢出隐藏的方法
    小编给大家分享一下css实现溢出隐藏的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css实现溢出隐藏的方法:1、用“text-overflow:ellips...
    231
    2023-09-27
  • CSS3中内容溢出的示例分析
    这篇文章给大家分享的是有关CSS3中内容溢出的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。CSS3内容溢出属性在CSS中的每一个元素都视为一个盒子,这个盒子就是一个容器...
    411
    2023-09-27
    css3
  • css实现多行文本溢出隐藏的方法
    这篇文章将为大家详细讲解有关css实现多行文本溢出隐藏的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在css中,可使用overflow属性来实现多行文本溢出隐藏,只需要给文本元素添加“overflo...
    902
    2023-09-27
  • css3如何控制元素隐藏
    这篇文章将为大家详细讲解有关css3如何控制元素隐藏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 控制方式:1、使用“display:non...
    167
    2023-09-27
    css3
  • css3怎么隐藏元素(两种方法)
    CSS3 隐藏技术让你有效控制页面布局和内容展示在网页制作中,CSS3 提供了许多优秀的技术,让开发者能够更加灵活地控制网页的布局与内容展示。其中,CSS3 隐藏技术是一种非常重要的技术,可以让你在网页中隐藏一些不需要展示的内容,从而让页面...
    474
    2023-09-27
  • css怎么隐藏溢出的字体
    本篇内容主要讲解“css怎么隐藏溢出的字体”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css怎么隐藏溢出的字体”吧! css中可以...
    583
    2023-09-27
    css
  • CSS3怎么实现单行文本溢出和多行文本溢出
    本篇内容主要讲解“CSS3怎么实现单行文本溢出和多行文本溢出”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3怎么实现单行文本溢出和多行文本溢出”吧!文本溢出分为:1.单行文本溢出 多用于文...
    885
    2023-09-27
  • css3怎么隐藏滚动条
    这篇文章主要介绍“css3怎么隐藏滚动条”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3怎么隐藏滚动条”文章能帮助大家解决问题。css3将滚动条隐藏的方法是,自定义滚动条的伪对象选择器【::-...
    490
    2023-09-27
  • css溢出图片隐藏怎么实现
    本教程操作环境:Windows10系统、CSS3版、DELL G3电脑css溢出图片隐藏怎么实现?CSS实现图片或文字溢出隐藏效果溢出隐藏文字溢出操作效果图:单行+溢出隐藏.nameBox { // 文字不允许换行(单行文本...
    512
    2023-09-27
    css 图片
  • css如何设置溢出隐藏
    这篇文章主要介绍css如何设置溢出隐藏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css设置溢出隐藏的方法:首先创建一个HTML示例文件;然后在body中定义一些p标签内容;最后通过“overflow:hidden...
    646
    2023-09-27
  • css3新增属性有设置文本溢出的样式吗
    这篇“css3新增属性有设置文本溢出的样式吗”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“...
    937
    2023-09-27
    css3
  • css3如何设置超出的文本隐藏
    这篇文章主要讲解了“css3如何设置超出的文本隐藏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3如何设置超出的文本隐藏”吧! ...
    554
    2023-09-27
    css
  • css3如何实现点击隐藏div
    小编给大家分享一下css3如何实现点击隐藏div,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在c...
    248
    2023-09-27
    css3 div
  • css3如何实现鼠标隐藏效果
    这篇“css3如何实现鼠标隐藏效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css3如...
    375
    2023-09-27
    css3
  • 使用css怎么实现图片溢出隐藏
    这篇文章将为大家详细讲解有关使用css怎么实现图片溢出隐藏,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。css图片怎么溢出隐藏?新建一个html文件,命名为test.html,用于讲解div...
    523
    2023-09-27
  • css溢出图片隐藏如何实现
    本篇内容介绍了“css溢出图片隐藏如何实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!css溢出图片隐藏的实现方法:1、创建一个div为“...
    513
    2023-09-27
  • 如何利用 CSS3 实现点击隐藏的效果
    在现代网页设计中,用户体验是非常重要的一环。而隐藏一些不必要的元素可以有效地提升网页的用户体验,让内容更加简洁、直观。本文就将向您介绍如何利用 CSS3 实现点击隐藏的效果,从而打造更好的用户体验。一、隐藏元素的常见方式在传统的网页设计中,...
    605
    2023-09-27
  • css3如何将滚动条隐藏
    这篇文章给大家分享的是有关css3如何将滚动条隐藏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css3将滚动条隐藏的方法是,自定义滚动条的伪对象选择器【::-webkit-scrollbar】,例如【.elem...
    447
    2023-09-27
  • CSS3
    http://caniuse.com/1、私有前缀及其用法.round{-khtml-border-radius: 10px; / Konqueror /-rim-border-radius: 10px; / RIM /-ms-border...
    169
    2023-09-27
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作