css实现在一行显示多余部分显示省略号

2019独角兽企业重金招聘Python工程师标准>>>

经常会出现一个盒子里放不下内容需要将多余部分显示省略号的需求，今天记录一下css实现的方式

//伪代码
<style>p {width:20px;height:20px;overflow: hidden;//多出部分隐藏white-space: nowrap;//一行显示text-overflow: ellipsis;//是否显示省略号}
</style>
<body><div><p>好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容</p></div>
</body>

如果是两行显示

<style>overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
</style>

可以试一试，最主要是后面的三句代码。如果使用js的话，可以先获取到里面的内容，然后使用字符串的截取方式（substr,substring,slice）等截取到需要的字符串后再加入到需要添加的标签里。

//伪代码
let pCon = $('p').text();
pCon = pCon > 4 ? pCon.substring(0,4) + '...':pCon;
$('p').html(pCon);

如果还想看更多字符串的方法，可以看：数组、字符串常用方法

转载于:https://my.oschina.net/yxmBetter/blog/917094

css实现在一行显示多余部分显示省略号相关推荐

完美解决向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示......
效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...
CSS设置文本不换行多余文字显示省略号
文章目录一.使用步骤一.使用步骤 1.文字单行不换行多余文字显示省略号代码如下(示例): white-space: nowrap;display: block;overflow: hidden; ...
Android textview 只显示一行，多余部分显示.....
如果说文字后面的....在文字的最下面这个使用的属性是ellipsize 下面来看下这个属性 android:ellipsize="start"-–省略号显示在开头 " ...
小程序页面中截取字符串长度超过显示多余的用省略号
1.首先在对应页面下新建 " center.wxs " 文件这个文件是小程序自身一套脚本语言 2.在 .wxs 文件中写截取字符串的方法 // 小程序页面中 ...
CSS 设置文字只显示一行，多余显示省略号
CSS 设置文字只显示一行,多余显示省略号 .view-text{/**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/di ...
如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）...
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
纯css控制文字2行显示多余部分隐藏
在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...
CSS之text-overflow--怎么让多余的文字不显示或者以省略号表示
此效果主要是用于标题过长进行处理. 但是小伙伴们会发就算我们加上了text-overflow也没有效果,下面我会给大家说明. 当没有text-overflow属性的时候是这样的. 1.text-ove ...
html不换行溢出省略号代替,css控制不溢出,不换行,溢出部分省略号显示
css控制不溢出,不换行,溢出部分省略号显示:white-space:nowrap;text-overflow:ellipsis;overflow:hidden; ext-overflow 取值: c ...
CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...

css实现在一行显示多余部分显示省略号

css实现在一行显示多余部分显示省略号相关推荐

最新文章

热门文章