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 ...
随机推荐
- Mysql备份系列(3)--innobackupex备份mysql大数据(全量+增量)操作记录
在日常的linux运维工作中,大数据量备份与还原,始终是个难点.关于mysql的备份和恢复,比较传统的是用mysqldump工具,今天这里推荐另一个备份工具innobackupex.innobacku ...
- js会员头像上传拖动处理头像类
js会员头像上传拖动处理头像类 点击下载源码文件
- windows Server 2008各版本区别详解
Windows Server 2008 是专为强化下一代网络.应用程序和 Web 服务的功能而设计,是有史以来最先进的 Windows Server 操作系统.拥有 Windows Server 20 ...
- shenben语录
1.别让别人的一句话将你击垮! 2.任何人都不能替你做决定,除了你自己! 3.对于省选: 想去就去,文化课什么的都不是问题. 如果不去,二十年后的自己一定会后悔的.
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- Linux Linux下特殊的printf函数和fputs函数
Linux下,printf函数必须以'\n'结尾才会立刻输出到屏幕,如果没有'\n'直到输出缓冲区满了以后才会打印到屏幕上(敲击换行也算),如果需要不换行的输出,一般可以使用write函数代替.'\n ...
- Python2.6-原理之类和oop(下)
来自<python学习手册第四版>第六部分 五.运算符重载(29章) 这部分深入介绍更多的细节并看一些常用的重载方法,虽然不会展示每种可用的运算符重载方法,但是这里给出的代码也足够覆盖py ...
- IDEA 13 无法进入debug 模式解决方案
1.最近在idea中使用tomcat开发项目,像往常一样打开tomcat进行debug,但奇怪的事情出现了,项目根本不进断点.后查找原因,估计idea的加载参数方式是:先加载tomcat中设置的参数, ...
- Tensorflow学习笔记1:Get Started
关于Tensorflow的基本介绍 Tensorflow是一个基于图的计算系统,其主要应用于机器学习. 从Tensorflow名字的字面意思可以拆分成两部分来理解:Tensor+flow. Tenso ...
- js中字符串和数组相互转化的方法
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #e4af0a } p. ...