css-文本超出后显示省略号
1、如果是单行文本:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2、如果是多行文本,将文本框高度设为文字行高的倍数,然后在文本后建一个content为“...”的宽度为1em并设置文本背景色的after伪类,相对文本框设置绝对位置为下0右0;这样可以在视觉上实现同样的省略效果。
3、或者直接在文本框后新建一个元素,比如
这个右下角显示详情,并且是个链接,可以新建一个链接,然后绝对位置右0下0,记着设置背景色。
网上还有其他高大上的方法,继续学习。
css-文本超出后显示省略号的更多相关文章
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- css文本超出隐藏显示省略号
p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...
- CSS3 文本超出后显示省略号...
纯用CSS实现,主要采用代码 overflow:hidden; text-overflow:ellipsis;//这是让文本溢出后,显示成省略号. white-space:nowrap;//禁止自动换 ...
- css 文本超出范围显示省略号
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- CSS文本溢出,显示省略号(...)
方式1:这种方式就是必须要跟width搭配使用,当你使用的display:flex; 的时候可能会影响样式 width: 200px; overflow: hidden; /*超出部分隐藏*/ tex ...
- css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- css兼容大部分浏览器的文本超出部分显示省略号
css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...
- CSS实现不换行/自动换行/文本超出隐藏显示省略号
在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...
- css文本溢出隐藏显示省略号(单行+多行)
文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法. 一. 单行文本不换行,并将超出文本隐藏 .box-content{ ove ...
随机推荐
- react拷贝index.html很恶心之解决办法
https://www.npmjs.com/package/html-webpack-plugin
- BZOJ 1036: [ZJOI2008]树的统计Count
1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec Memory Limit: 162 MB Submit: 14354 Solved: 5802 [Subm ...
- Filestream/Windows Share导致Alwayson Failover失败
最近做了一个case, 客户在ALWAYSON环境下进行failover操作, 之后所有replica上的alwayson group状态变成了resolving. 并且在执行failover的rep ...
- SQL 2014新特性- Delayed durability
ACID 是数据库的基本属性.其中的D是指"持久性":只要事务已经提交,对应的数据修改就会被保存下来,即使出现断电等情况,当系统重启后之前已经提交的数据依然能够反映到数据库中. 那 ...
- TinyFrame尾篇:整合Spring AOP实现用户认证
创建Manager用户验证表 这一篇主要讲解使用AOP对用户操作进行验证,如果通过验证,则继续执行,反之,则不能执行.其思想和上一篇完全一致. 由于需要用到用户认证,所以我们新建一个Manager实体 ...
- QT5 动态链接库的创建和使用
记录一下QT5 动态链接库的创建和使用 在文章的最后有完成的代码供下载 1.创建动态链接库 先新建一个库项目 选择chose进入下一下页面,类型选择共享库,输入一个名称:我输入的是sld 再点击下一步 ...
- 用linqPad帮助你快速学习LINQ
在这里我向大家推荐的一个具是LinqPad有了这个工具并熟练使用就可以很快学习并掌握linq linqPad下载地址:http://www.linqpad.net/ 它也自带了很多例子方便大家查询,l ...
- 我的Logo设计简史
近日,日本东京奥运会会微因涉嫌抄袭而被弃用的新闻引起设计界的一翻热论.在此我想到自己的LOGO设计,虽说并一定不好看甚至自己看回来都觉得略丑,但 几乎没有过抄袭的念头.有句话说,不想当设计师的程序猿不 ...
- 从.NET的宠物商店到Android MVC MVP
1 一些闲话 记得刚进公司的时候,我们除了做常规的Training Project外,每天还要上课,接受各种技术培训和公司业务介绍.当时第一次知道QA和SQA的区别.Training Project时 ...
- python2.7到python3代码转换脚本2to3的一些介绍
你的位置: Home ‣ Dive Into Python 3 ‣ 难度等级: ♦♦♦♦♦ 使用2to3将代码移植到Python 3 ❝ Life is pleasant. Death is ...