【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:
单行文本溢出的省略
<div style = 'width:400px;
height:40px;
border:1px solid red;'>
<p style='overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;'>
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p>
</div>
demo:
从单行文本溢出省略到多行文本溢出省略
多行文本溢出的省略(...)方案一 ---简单方便的解决方案
<div style = 'width:400px;
height:70px;
border:1px solid red;'>
<p style='display:
-webkit-box;//对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical;//设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 2;//溢出省略的界限
overflow:hidden;//设置隐藏溢出元素'>
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p>
</div>
多行文本溢出的省略(...)方案二 ---简单粗暴的解决方案
<div style = 'position:relative;
width:400px;
height:45px;
border:1px solid red;
overflow:hidden;
'>
这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
<p style = 'position:absolute;right:0;bottom:6px;margin:0;background:white'>...</p>
</div>
demo:
多行文本溢出的省略(...)方案三 --简洁优雅的解决方案
<div id='view' style='border:1px solid red;width:200px;height:70px;overflow:auto'></div>
s = '这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本'
el = document.getElementById('view');
n = el.offsetHeight;
for(i=0; i<s.length; i++) {
el.innerHTML = s.substr(0, i);
if(n < el.scrollHeight) {
el.style.overflow = 'hidden';
el.innerHTML = s.substr(0, i-3) + '...';
break;
}
}
【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势的更多相关文章
- 【CSS/JS学习】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势
引言: 写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: 也可能是多行的: 下面我就给大家展示如何简单或 ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- css实现文本两行或多行文本溢出显示省略号
word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ -webkit-b ...
- CSS和JS实现单行、多行文本溢出显示省略号(该js方法有问题不对)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号(……)解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- 《CSS实现单行、多行文本溢出显示省略号》
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方式: overflow: hidden; te ...
随机推荐
- adduser与useradd的区别
问题:使用 useradd 创建用户,发现 /home 目录下没有自动创建关于用户的目录.所以做了一番调查研究 useradd是一个linux命令,但是它提供了很多参数在用户使用的时候根据自己的需要进 ...
- iview 路由权限判断的处理
主要是在main.vue做处理 其它地方不需要处理 menuList () { let getRouter = JSON.parse(sessionStorage.getItem('getUserDa ...
- php使用redis的几种常见方式和用法
一.简单的字符串缓存 比如针对一些sql查询较慢,更新不频繁的数据进行缓存. <?php $redis = new Redis(); $redis->connect('127.0.0.1' ...
- python 下 判断操作系统
import platform OS = platform.system() # Windows, Linux, Darwin def get_sys(): if OS == 'Darwin': pr ...
- Kafka的安装及与Spring Boot的集成
安装JDK 下载jdk-8u202-ea-bin-b03-linux-x64-07_nov_2018.tar.gz 解压 配置 $ vi /etc/profile,在最后加入下面两行 export J ...
- Linux permission denied问题
初试Linux 本来想试一试递归的mkdir -p结果遇到了permission denied,但是自己明明是管理员啊 查了博客,在文件名前加上chmod 777 ,例如chmod 777 temp ...
- laravel-安装验证码扩展
第一步:找到验证码扩展 链接:https://packagist.org/packages/mews/captcha 第二步:安装 环境要求:验证码需要开启php的gd库 . 执行命令(有时候安装会出 ...
- python3 第二十五章 - comprehensions(推导式)
推导式(又称解析式),是Python的一种独有特性.推导式是可以从一个数据序列构建另一个新的数据序列的结构体. 共有三种推导,在Python2和3中都有支持: 列表(list)推导式 字典(dict) ...
- 用STS构建spring boot
操作步骤:1. 登录地址http://spring.io/tools 下载sts,spring-tool-suite-3.9.5.RELEASE-e4.8.0-win32-x86_64.zip2. 解 ...
- 数据库基础 RDBMS、NoSQL