文字溢出时，实现在末尾显示三个点省略效果

本文地址：ttp://www.cnblogs.com/veinyin/p/7629781.html

有时我们会有这样的需求：当文本内容较多，宽度超出父容器时，就在最后显示三个点，代表还有东西被折叠起来了。如下图

具体实现

HTML 如下

1 <div>
2     <p>我是文字我是文字我是文字我是文字</p>
3 </div>

div 样式如下

1 div {
2     width: 200px;
3     margin: 100px auto;
4     border: 1px solid #CCCCCC;
5 }

简单加了个边框，然后居中方便截图，然后给了个宽度，作为文本宽度的限制

p 的样式如下

1 p {
2     white-space: nowrap;
3     text-overflow: ellipsis;
4     overflow: hidden;
5 }

第 2 行表示强制在一行显示，如果不强制在一行显示，超出容器宽度的内容换行显示，父容器直接被撑高，就没有溢出了；

第 3 行表示在溢出时显示省略标记，也就是图中红线圈出来的三个点，这个就没啥好说的了；

第 4 行表示溢出部分内容隐藏，不溢出隐藏的话.... 第 3 行的溢出设置还有啥用，我都直接显示到父容器外面了啊喂！

但有时我们需要实现多行文本末尾折叠，可以使用如下方法，但兼容性较差，可以用于移动端

@左耳_fly 提出了火狐不支持的问题，对的，在这里声明下，火狐和 IE 不支持的哈，截图是 chrome 里的

1 p {
2     text-overflow: ellipsis;
3     overflow: hidden;
4     display: -webkit-box;
5     -webkit-line-clamp: 3;
6     -webkit-box-orient: vertical;
7 }

第 5 行为要显示的行数

END~~~≥ω≤

转载于:https://www.cnblogs.com/veinyin/p/7629781.html

文字溢出时，实现在末尾显示三个点省略效果相关推荐

单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；
文本溢出省略号表示的实现效果: 1.解决单行文字溢出: 解决方式: 在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: n ...
文字溢出时如何使溢出部分显示为 ...
css方式: 单行溢出 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
html文本自动省略,css单行、多行文本溢出时自动显示省略号方法
在实际项目开发中,经常会遇到这样的需求,需要我们把单行或者多行文字溢出时自动显示省略号,今天码云笔记就为大家通过多种方法来实现本末尾省略号显示这一需求. 我们先从最原始的开始,单行文本溢出如何显示省略 ...
【css】文字溢出，显示省略符号（...）
前言 CSS3 文字溢出,显示省略符号需要区分情况进行处理:可分为单行和多行的情况. 单行文字溢出假设有这样的需求,如图: 那么可以用如下代码实现: <!DOCTYPE html> &l ...
前端_实现文本溢出显示三个小圆点“...“
话不多说 , 直接上代码 : 设置单行文本 : width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis ...
css文字溢出省略号显示
单行文字溢出省略号显示步骤: 1.强制文字一行显示 white-space: nowrap; 2.溢出部分隐藏起来 overflow: hidden: 3.文字溢出的时候用省略号显示 text-ov ...
html字体圆点6,css设置文字溢出也可以这样
.笨办法(也是最有效的):margin负值定位法--兼容所有主流浏览器这是一个比较短的文字. - 这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示. - HTML部分: class=&qu ...
H5 自适应正方形图片与文字溢出产生省略号
1.正方形图片:有时候前端获取到的图片大小不一样,固定宽高会变形,不固定宽高排版又会乱,所以要求图片不变形的情况下正方形展示,这样也不影响排版代码如下: <div><div cla ...
前端正确处理“文字溢出”的思路
前言: 最近在项目中需要做到类似于 Mac 下这种,当屏幕宽度足以容下当前文件名称的时候,文件名称全部展示,不做省略. 然而当用户缩放浏览器显示的尺寸时,我们需要做到省略中间的文字,选择保留后缀这种方 ...

文字溢出时，实现在末尾显示三个点省略效果

文字溢出时，实现在末尾显示三个点省略效果相关推荐

最新文章

热门文章