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

css3溢出隐藏的方法

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

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

如果实现单行文本的溢出显示省略号同学们应该都知道用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中内容溢出的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。CSS3内容溢出属性在CSS中的每一个元素都视为一个盒子,这个盒子就是一个容器。容器就有大小之分,如果在样式中指 ...
    404
    2023-03-24
    css3
  • css3如何控制元素隐藏
    这篇文章将为大家详细讲解有关css3如何控制元素隐藏,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。控制方式:1、使用“display:none”语句将元素移除出可访问性树,进 ...
    162
    2023-03-24
    css3
  • css怎么隐藏溢出的字体
    本篇内容主要讲解“css怎么隐藏溢出的字体”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css怎么隐藏溢出的字体”吧!css中可以利用overflow属性来实现字体 ...
    583
    2023-03-24
    css
  • css3如何设置超出的文本隐藏
    这篇文章主要讲解了“css3如何设置超出的文本隐藏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3如何设置超出的文本隐藏”吧!在css中,可以利用over ...
    539
    2023-03-24
    css
  • css3新增属性有设置文本溢出的样式吗
    这篇“css3新增属性有设置文本溢出的样式吗”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css3新增属性有设置文本溢出的样 ...
    936
    2023-03-24
    css3
  • css3如何实现点击隐藏div
    小编给大家分享一下css3如何实现点击隐藏div,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在css3中,可以利用“:active ...
    242
    2023-03-24
    css3 div
  • css3如何实现鼠标隐藏效果
    这篇“css3如何实现鼠标隐藏效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css3如何实现鼠标隐藏效果”文章吧。 ...
    354
    2023-03-24
    css3
  • css如何设置图片放大后隐藏溢出
    这篇文章主要介绍“css如何设置图片放大后隐藏溢出”,在日常操作中,相信很多人在css如何设置图片放大后隐藏溢出问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”css如何设置图片放大后隐藏溢出”的疑惑有所帮助! ...
    910
    2023-03-24
    css
  • CSS3
    http://caniuse.com/1、私有前缀及其用法.round{-khtml-border-radius: 10px; / Konqueror /-rim-border-radius: 10px; / RIM /-ms-border ...
    159
    2023-03-24
  • CSS3径向渐变的方法
    这篇“CSS3径向渐变的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS3径向渐变的方法”文章吧。CSS3径 ...
    283
    2023-03-24
    css3
  • css3过渡与转换的方法
    这篇文章主要介绍“css3过渡与转换的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3过渡与转换的方法”文章能帮助大家解决问题。一 css3过渡 转换css3过渡(transition)允 ...
    828
    2023-03-24
    css3
  • css3导航索引设计的方法
    本篇内容主要讲解“css3导航索引设计的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3导航索引设计的方法”吧!HTML为表单标签定义的tabindex属性,此属性为当前元素指定了 ...
    353
    2023-03-24
    css3
  • CSS3中transition的使用方法
    这篇文章主要讲解了“CSS3中transition的使用方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS3中transition的使用方法”吧!transitioncss3的tran ...
    850
    2023-03-24
    css3
  • CSS3中渐变的实现方法
    本篇内容主要讲解“CSS3中渐变的实现方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS3中渐变的实现方法”吧!1、线性渐变语法:background: linear-gradient(d ...
    173
    2023-03-24
    css3
  • CSS3动画回调处理的方法
    这篇文章主要介绍“CSS3动画回调处理的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS3动画回调处理的方法”文章能帮助大家解决问题。CSS3动画也是可以做回调处理的,这里分为两个属性,一个 ...
    899
    2023-03-24
    css3
  • CSS3弹性盒子布局的方法
    这篇文章主要介绍“CSS3弹性盒子布局的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS3弹性盒子布局的方法”文章能帮助大家解决问题。我认为弹性盒子布局(Flexible Box Layou ...
    144
    2023-03-24
    css3
  • CSS3 (animation)
    CSS3 animation 动画实例代码:属性取值说明: animation: animation-name animation-duration animation-timing-function animation-delay ani ...
    587
    2023-03-24
    animation
  • CSS3 (columns)
    CSS3 多列布局 columnsa.column-width 每列的宽度实例代码:说明:1.如果内容的宽度小于所设置内容的宽度,则只出现一列,并且不会影响元素本身的display属性。如果内容的宽度大于所设置的值,则会用内容的宽度除以所设 ...
    549
    2023-03-24
    columns
  • CSS3总结
    一、选择器1.通用选择器E~F:E后边所有和E同级的F2.属性选择器E[att^=’val’]:att属性中以val开头的E[att$=’val’]:以val结尾的E[att*=’val’]含有val的选择器3.伪类选择器E:nth-chi ...
    880
    2023-03-24
  • css3 动画
    3.5.4  动画有人将HTML 5和CSS 3比做Flash的杀手,这是有原因的。因为除了HTML 5能够实现矢量图形制作外,使用CSS3还可以对图像进行更细致的操作,它新增了动画功能,要实现图像的变形等功能,只需要一行CSS就可以实 ...
    513
    2023-03-24
    动画
热门问答
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作