4种方法实现单行、多行——文本溢出显示省略号

一、单行溢出
在前端基础，单行文本的溢出显示省略号，这种做法我们通常用text-overflow来实现，然后给元素定宽，超出隐藏，具体如下面一段代码：

显示效果：

二、那么多行文本溢出呢？具体代码如下：

显示效果：

说明：
1、该方法不支持ff，主要是-webkit-line-clamp这一属性不是标注的一部分，可能是webkit内部使用的，或者被弃用的。根据存在即合理的原则，也被很多人发现，不妨试一试。

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

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

三、这也是多行文本溢出，采用的:after来解决的。具体代码如下：

显示效果如图：

说明：该方法适用范围广，但在文字未超出行的情况下也会出现省略号,可结合js优化该方法。所以的注意一下几点：
1、将height设置为line-height的整数倍，防止超出的文字露出。

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

3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

四、我们能不用js的方法来实现了？答案也是可以的。具体代码如下：

html 代码：

css代码：

js代码：

效果如图：

通过从后向前逐个删除末尾字符，直至元素的高度小于父元素高度，到达效果，这种方法可以兼容各种浏览器。

转载于:https://www.cnblogs.com/blog-leo/p/5123808.html

4种方法实现单行、多行——文本溢出显示省略号相关推荐

web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
css3文本溢出显示省略号的方法
项目中常常有这种需要我们对溢出文本进行"-"显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行语法 o ...
单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
文本溢出显示省略号效果
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号单行文本溢出显示省略号方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
html设置文字出现效果,文本溢出显示省略号效果怎么实现？
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
文本溢出显示省略号，鼠标浮动查看全部内容
目录 1.文本溢出显示省略号 2.鼠标浮动查看全部内容 1.文本溢出显示省略号今天做项目时遇到一种需求:文本溢出截断省略,上网查阅了一下,还是挺简单的,但是考虑到自己疑似老年痴呆的大脑,就在这里整理 ...

4种方法实现单行、多行——文本溢出显示省略号

4种方法实现单行、多行——文本溢出显示省略号相关推荐

最新文章

热门文章