1、单行文本溢出

文本内容

<div class="singleLine">                   　　HelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorldHelloWorld
</div>

固定文本宽度，且保证文本不换行，溢出的部分隐藏，设置text-overflow为ellipsis则溢出的文本以省略号显示

.singleLine{ width:200px;padding: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}

显示效果如图

2、多行文本溢出

文本内容

<div class="multiLine">HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld HelloWorld
</div>

多行文本显示时通过-webkit-line-clamp设置显示的行数，并且设置display为-webkit-box，-webkit-box-orient为vertical

.multiLine{ width:200px; padding:0 10px;overflow : hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}

显示效果

3、跨浏览器

.imitate_ellipsis{position:relative;line-height:1.4em;height:2.8em;overflow:hidden;width:200px;
}
.imitate_ellipsis::after{content:"...";font-weight:bold;position:absolute;bottom:0;right:0;padding-left:20px;background: -webkit-linear-gradient(left, transparent, #fff 0%);background: -o-linear-gradient(right, transparent, #fff 0%);background: -moz-linear-gradient(right, transparent, #fff 0%);background: linear-gradient(to right, transparent, #fff 0%);
}

通过伪类::after在文本后加入省略号

转载于:https://www.cnblogs.com/lhyhappy365/p/9430428.html

css单行文本和多行文本溢出实现省略号显示相关推荐

单行文本和多行文本溢出以省略号显示方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案文章目录 CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二 ...
HTML技巧篇：如何让单行文本以及多行文本溢出显示省略号(…)
文章目录 HTML技巧篇:如何让单行文本以及多行文本溢出显示省略号(-) 一.单行文本溢出显示省略号核心css语句: 二.多行文本溢出显示省略号核心css语句: 效果图: 总结 HTML技巧篇:如 ...
css 单行文本和多行文本换行
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
单行文本和多行文本溢出显示省略号
1.单行文本溢出显示省略号首先需要设置宽高 overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-s ...
单行及多行文本溢出以省略号显示的方法总结
需求: 在前端页面布局中,经常会有因文字过多而影响页面排版.特别是在移动端页面中,因屏幕宽度不够段落文字如完全显示则会打乱布局.因此若段落文字能根据屏幕空余大小而显示就完美了,也就是若屏幕够大,段落文 ...
CSS单行文字和多行文字超出部分省略号显示
单行 .text{width: 400rpx;overflow: hidden; /*隐藏*/white-space: nowrap; /*不换行*/text-overflow: ellipsis; ...
单行溢出文字省略号显示（HTML、CSS）
单行溢出文字省略号显示(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta cha ...
html最多显示两行,css 实现两行或多行文本溢出显示省略号（...）
1. 大家都知道,强制一行溢出显示省略号(...)的情况很简单 overflow:hidden;//超出的隐藏 text-overflow:ellipsis;//显示省略符号来代表被修剪的文本. wh ...
多行文本溢出隐藏省略号
多行文本溢出隐藏省略号一.单行文本溢出二.多行文本溢出一.单行文本溢出 /* 单行文本溢出 */.inlines{overflow: hidden;white-space: nowrap;tex ...

css单行文本和多行文本溢出实现省略号显示

1、单行文本溢出

2、多行文本溢出

3、跨浏览器

css单行文本和多行文本溢出实现省略号显示相关推荐

最新文章

热门文章