css不受高度限制实现文本超出隐藏并以省略号结束
文本超出省略号显示代码:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 100px; /*宽度做好限制*/
文本文本文本文本文本...
不考虑兼容性的,适用于WebKit浏览器内核的
width: 100px;
height: 65px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*截取到第三行*/
overflow: hidden;
文本文本文本文本文本
文本文本文本文本文本
文本文本文本文本文...
容器设置溢出隐藏、并手动设置生成一个内容为“...”的伪元素
.box {
width: 400px;
height: 100px;
margin: 100px auto;
border: 1px solid #ccc;
position: relative;
line-height: 20px;
overflow: hidden;
} .box::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 10px;
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%);
}
效果同上
css不受高度限制实现文本超出隐藏并以省略号结束的更多相关文章
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
- css兼容大部分浏览器的文本超出部分显示省略号
css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...
- css如何实现多行文本时,内容溢出,出现省略号
一:单行文本出现省略号: .oneLine{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100px; ...
- css文本超出隐藏显示省略号
p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- 用css控制table td内文字超出隐藏
(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 重点是把table设置为table-layout: fixed; 超出的文字隐藏的效果才有. p标签超出的文字隐藏的效果不需要设置这个内 ...
随机推荐
- 博客Hexo + github pages + 阿里云绑定域名搭建个人博客
申请域名 万网购买的域名,地址:https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制台进行解析 控制台 ...
- Python学习笔记【第四篇】:基本数据类型
变量:处理数据的状态 变量名 = 状态值 类型 python中有以下基本数据类型: 1:整形 2:字符串类型 3:Bool类型 4:列表 5:元祖(不可变) 6:字典(无序) 7:集合 (无序.不重复 ...
- python创建数组的方法
一 直接定义法: 1.直接定义 matrix=[0,1,2,3] 2.间接定义 matrix=[0 for i in range(4)] print(matrix) 二 Numpy方法: Numpy内 ...
- Python中变量的命名
变量的命名 目标 标识符和关键字 变量的命名规则 0.1 标识符和关键字 1.1 标识符 标示符就是程序员定义的 变量名.函数名 名字 需要有 见名知义 的效果,见下图: 标示符可以由 字母.下划线 ...
- Intellij IDEA神器居然还有这些小技巧
概述 Intellij IDEA真是越用越觉得它强大,它总是在我们写代码的时候,不时给我们来个小惊喜.出于对Intellij IDEA的喜爱,我决定写一个与其相关的专栏或者系列,把一些好用的Intel ...
- 使用freemarker生成xml模板
今天在java交流群里有个人问我如何用freemarker生成xml模板文件,可以手动配置参数,于是我到网上百度了一下.发现有一位同行的博文写的很nice,于是我就照着他的代码敲了一遍,最后实现了,本 ...
- 基于Mono和VSCode打造轻量级跨平台IDE
近期Visual Studio推出Mac版本号的消息迅速在技术圈里刷屏,当project师们最喜欢的笔记本电脑Mac,邂逅地球上最强大的集成开发环境Visual Studio的时候,会碰撞出如何精 ...
- deque源码2(deque迭代器、deque的数据结构)
deque源码1(deque概述.deque中的控制器) deque源码2(deque迭代器.deque的数据结构) deque源码3(deque的构造与内存.ctor.push_back.push_ ...
- Spring boot集成spring-boot-starter-data-jpa环境搭建
1.创建Spring boot项目 2.保存等待构建完成 3.增加spring-boot-starter-data-jpa.内存数据库依赖包hsqldb <!-- 添加data jpa依赖 -- ...
- 使用ANNdotNET进行情感分析
2018年10月的MSDN杂志上发表了由James McCaffrey撰写的文章“使用CNTK的情感分析” .在这篇博文中,我将向您介绍这篇非常好且写得很好的MSDN文章示例.我不打算重复MSDN文章 ...