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 ...
随机推荐
- 046医疗项目-模块四:采购单模块—采购单审核(Dao,Service,Action三层)
当医院把采购单提交之后,由监管单位进行采购单审核,由卫生院及卫生局进行审核.卫生局可以审核所有医院创建的采购单,卫生院只审核本辖区医院创建的采购单. 操作流程: 点击"采购单审核" ...
- Javascript Math.ceil()与Math.round()与Math.floor()区别
Math.ceil()向上舍入 1 2 3 alert(Math.ceil(20.1)) //输出 21 alert(Math.ceil(20.5)) //输出 21 alert(Math.ceil( ...
- 添加Distributor失败
上周做了一个case,客户无法为SQL Server instance配置remote distributor. 下面分享一下排查问题的过程,希望对您排查类似的问题所有帮助. 客户的环境中的SQL S ...
- sobel算子
#1,个人理解 网上查了很多资料,都说sobel算子是用来检测边缘的,分别给了两个方向上的卷积核,然后说明做法,就说这就是sobel算子.对于我个人来说,还有很多不明白的地方,所以理清下思路. #2, ...
- 浅谈设计模式--建造器模式(Builder Pattern)
建造器模式,是于创建带有大量参数的对象,并避免因参数数量多而产生的一些问题(如状态不一致-JavaBean的setter模式). 如果参数多且有些是必须初始化的,有些是不一定需要初始化的时候,创建对象 ...
- 前端科普文—为什么<!DOCTYPE> 不可或缺
When question comes 你一定在 HTML 页面最前面看到过这样一行代码(比如 百度): <!DOCTYPE html> 或者说类似这样的(比如 博客园-韩子迟 PS:博客 ...
- HTML5 postMessage 跨域交换数据
前言 之前简单讲解了利用script标签(jsonp)以及iframe标签(window.name.location.hash)来跨域交换数据,今天我们来学习一下HTML5的api,利用postMes ...
- SQLite剖析之功能特性
SQLite是遵守ACID的轻型数据库引擎,它包含在一个相对较小的C库中.它是D.RichardHipp创建的公有领域项目.不像常见的客户端/服务器结构范例,SQLite引擎不是一个与程序通信的独立进 ...
- 从 datetime2 数据类型到 datetime 数据类型的转换产生一个超出范围的值
具体的错误原因是:C#中的DateTime类型比SqlServer中的datetime范围大.SqlServer的datetime有效范围是1753年1月1日到9999年12月31日,如果超出这个范围 ...
- Matlab和simulink数据的保存和读取
文件的存储 MATLAB支持工作区的保存.用户可以将工作区或工作区中的变量以文件的形式保存,以备在需要时再次导入.保存工作区可以通过菜单进行,也可以通过命令窗口进行. 1. 保存整个工作区 选择Fil ...