css文本溢出解决方案
1.普通单行截断省略
overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容)
text-overflow:ellipsis;(设置文字在一行显示,不能换行)
white-space:no-wrap;(规定当文本溢出时,显示省略符号来代表被修剪的文本)
这个方法的优点:
无兼容问题
响应式截断
文本溢出范围才显示省略号,否则不显示省略号
省略号位置显示刚好
缺点:
只支持单行文本截断
2.多行截断省略
-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行)
display: -webkit-box;
-webkit-box-orient: vertica;
overflow: hidden;
text-overflow: ellipsis;
这个方法的兼容性一般
出处链接:https://www.jianshu.com/p/5a0943faf7aa
- clamp.js
- jQuery.dotdotdot
css文本溢出解决方案的更多相关文章
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
- CSS文本溢出处理方式
1. 单行文本溢出省略号效果 .ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } <div cl ...
- CSS ... 文本溢出用省略号代替
{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap } text-overflow 属性规定当文本溢出包含元素时发生的事情. c ...
- css 文本溢出
多行文本溢出处理: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 3 行 overflow ...
- CSS文本溢出效果&滚动条样式设置
一.文本溢出 1.overflow: hidden; 超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...
- #CSS 文本溢出部分显示省略号
单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...
- css 文本溢出显示省略号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- 医院大数据平台建设_构建医院智能BI平台的关键技术
在新技术层出不穷的当下,世界各地的组织正在以闪电般的速度变化和进化,以便在新技术可用时加以利用.其中目前最具活力的一个领域是商业智能(BI).想一想,你可能已经习惯以每周或每月IT或数据科学家交付给你 ...
- 【Windows 操作系统】Windows 进程的内核对象句柄表
总结: 1.句柄就是进程句柄表中的索引.2.句柄是对进程范围内一个内核对象地址的引用,一个进程的句柄传给另一个进程是无效的.一个内核对象可用有多个句柄.Windows之所以要设立句柄,根本上源于内存管 ...
- MSBuild 和项目文件
Microsoft 生成引擎(MSBuild)项目文件位于生成和部署过程的核心. 本主题以 MSBuild 和项目文件的概念性概述开头. 它介绍了在处理项目文件时将遇到的关键组件,并通过一个示例来演示 ...
- Linux 启动、停止、重启jar包脚本
转至:https://www.cnblogs.com/foolash/p/13824647.html startOrStropJar.sh #!/bin/bash #这里可替换为你自己的执行程序,其他 ...
- 分布式系统下的CAP定理
本文参考EricBrewer博客加上自己的理解整理. CAP定理又被成为布鲁尔定理,是加州大学计算机科学家埃里克·布鲁尔提出来的猜想,后来被证明成为分布式计算领域公认的定理. CAP定义,在高并发的场 ...
- Qt:QNetworkRequest
0.说明 QNetworkRequest类代表被QNetworkAccessManager发送的请求. QNetworkReuqest是网络访问API的一部分,在其内部保留了在网络上发送一个reque ...
- linux多进/线程编程(2)—— fork函数和进程间“共享”数据
参考: 1.博客1:https://www.pianshen.com/article/4305691855/ fork:在原进程的基础上"分叉"出一个子进程,即创建一个子进程. N ...
- pandas模块篇(之三)
今日内容概要 目标:将Pandas尽量结束 如何读取外部excel文件数据到DataFrame中 针对DataFrame的常用数据操作 索引与切片 操作DataFrame的字段名称 时间对象序列操作 ...
- Go标准的目录结构(自总结)
微服务版 ├── LICENSE.md ├── Makefile //在任何一个项目中都会存在一些需要运行的脚本,这些脚本文件应该被放到 /scripts 目录中并由 Makefile 触发 ├── ...
- Ajax 实战(一)
目录 Ajax 实战(一) 简介 入门案例 基于Ajax进行登录验证 HTTP请求编码格式和报文 Content-Type=application/x-www-form-urlencoded Cont ...