CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式。
单行文本
三行CSS代码实现:
overflow: hidden; // 文本溢出隐藏
text-overflow: ellipsis; // 显示省略号
white-space: nowrap; // 设置文本不换行
注意:
- 设置文本溢出显示省略号时必须有宽度 width;
- 必须要设置display属性为line-block/block,设置为其他值不生效。
多行文本
1. CSS代码实现
这种方式用于webkit浏览器或者移动端页面中。
具体例子如下:
<div class="box">
<p class="textEllipsis">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</p>
</div>
<style>
box {
width: 200px;
background-color: #ccc;
}
.textEllipsis{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /*显示的行数*/
overflow: hidden;
word-break:break-all; /*可择*/
}
</style>
在未设置 .textEllipsis
样式之前文本如上图显示。
设置 .textEllipsis
样式之后,如下图显示。显示两行,可以通过设置 -webkit-line-clamp
的属性值来控制显示的行数。
word-break: break-all;
所有的都换行,不留一点空隙的换行。如下图所示。
2. 非webkit浏览器
可以通过css样式技巧实现。实例如下:
<div class="box">
<p class="textEllipsis">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</p>
</div>
<style>
.box {
width: 200px;
background-color: #ccc;
}
.textEllipsis {
position: relative;
line-height: 20px;
height: 60px; /*height高度正好是line-height的n倍*/
overflow: hidden;
border: #5D5D5D solid 1px;
word-break: break-all;
}
.textEllipsis::after {
content: "…";
position: absolute;
bottom: 0;
right: 0;
width: 17px;
padding-left: 33px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
效果图如下,感觉不是很美观,但也是一种实现方式。
js实现文本溢出显示省略号
使用一些js库实现文本溢出隐藏的效果也比较好。
- Clamp.js 实现。github地址:https://github.com/josephschmitt/Clamp.js。
var module = document.getElementById('clamp-this-module');
//多行
$clamp(module,{clamp:3});
//单行
$clamp(module,{clamp:1});
- 使用jquery插件,jQuery.dotdotdot。官网地址点这里
注意:使用jQuery.dotdotdot插件时要给希望显示省略号的盒子添加高度,否则不会生效。
<style>
.wrapper {
width: 400px;
height: 50px;
}
</style>
<p class="wrapper">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores maxime quia velit quod, praesentium animi a, debitis incidunt, consectetur odio, voluptatum nam dolores perspiciatis quo sit. Voluptatibus ab temporibus, sit!
</p>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.dotdotdot@3.2.3/dist/jquery.dotdotdot.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".wrapper").dotdotdot({
// 添加相关配置项
ellipsis : '...'
});
});
</script>
参考文章:https://blog.csdn.net/u013112461/article/details/102546463
CSS和JS实现文本溢出显示省略号的更多相关文章
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- CSS单行文本溢出显示省略号
此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- CSS3文本溢出显示省略号
CCS3属性之text-overflow:ellipsis;的用法和注意之处 语法: text-overflow:clip | ellipsis 默认值:clip 适用于:所有元素 clip: 当对象 ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- css 多行文本的溢出显示省略号(移动端)
多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...
- 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法
一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...
随机推荐
- git常用代码合集
git常用代码合集 1. Git init:初始化一个仓库 2. Git add 文件名称:添加文件到Git暂存区 3. Git commit -m “message”:将Git暂存区的代码提交到Gi ...
- 尚硅谷ajax视频教程1
1.+尚硅谷_佟刚_Ajax_概述.wmv 2.+尚硅谷_佟刚_Ajax_使用+XMLHttpRequest+实现+Ajax.wmv XMLHttpRequest 对象提供了对 HTTP 协议的完全的 ...
- java scoket Blocking 阻塞IO socket通信四
记住NIO在jdk1.7版本之前是同步非阻塞的,以前的inputsream是同步阻塞的,上面学习完成了Buffer现在我们来学习channel channel书双向的,以前阻塞的io的inputstr ...
- java命令行输入参数
Java命令行输入参数 代码用例:命令行输入参数,并进行加法运算. public class Demo01 { public static void main(String[] args) { for ...
- python黑帽子之tcp服务端
试着用python创建一个标准的多线程tcp服务器 import socket import threading bind_ip = "0.0.0.0" bind_port = 8 ...
- 如何在使用spring boot的时候,去掉使用tomcat
在spring boot中引入spring-boot-starter-web依赖的时候,不想使用spring boot提供的tomcat怎么办呢? 如下配置则可以解决问题: <dependenc ...
- centos7-解决vim无法找到问题
vim编辑器是Linux中的强大组件,是vi编辑器的加强版 在Linux命令行输入vim时提示:-bash:vim:common not found,之后按着查询到的解决办法整好了: 解决步骤如下 ...
- Vue防止按钮重复提交
参考了:https://www.cnblogs.com/adbg/p/11271237.html 方法:使用全局指令的方式. 一.新建指令 1.我们首先新建一个js文件,例如起名为plugins.js ...
- day45 数据库基础
目录 一.存储引擎 二.数据类型 1 整形 2 浮点型 3 字符类型 3.1 类型 3.2 举例验证区别 3.3 对比优缺点 4 日期类型 5 枚举和集合类型 一.存储引擎 不同的存储引擎对应着不同的 ...
- 萌新计划 PartⅠ
Part Ⅰ web1-7 题目总体代码框架如下,其中过滤内容不同,大体上通过构造出id=1000类似的语句进行绕过,得到flag <?php # 包含数据库连接文件 include(" ...