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 ...
随机推荐
- wk_02
Python 序列 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推.序列都可以进行的操作包括索引,切片,加,乘,检 ...
- HRV基础
Source: Mostly from wiki. Heart rate variability (HRV,心率变异性) is the physiological phenomenon of vari ...
- Protocol https not supported or disabled in libcurl
最后用PHP Curl 模拟访问HTTPS ,总是得到 Protocol https not supported or disabled in libcurl 错误,奇怪了,找了很多资料,有人说没有开 ...
- Display HTML in WPF and CefSharp
https://www.codeproject.com/articles/881315/display-html-in-wpf-and-cefsharp-tutorial-part Download ...
- mac上开启ftp
开启 sudo -s launchctl load -w /System/Library/LaunchDaemons/ftp.plist 关闭 sudo -s launchctl unload -w ...
- MyBatis.Net 学习手记
MyBatis.NET的前身为IBatis,是JAVA版MyBatis在.NET平台上的翻版,相对NHibernate.EntityFramework等重量级ORM框架而言,MyBatis.NET必须 ...
- 离线安装 Cloudera ( CDH 5.x )
要配置生产环境前,最好严格按照官方文档/说明配置环境.比如,官方说这个安装包用于RETHAT6, CENTOS6,那就要装到6的版本下,不然很容易出现各种各样的错. 配置这个CDH5我入了很多坑,最重 ...
- 基于VirtualBox安装Ubuntu图文教程
基于VirtualBox虚拟机安装Ubuntu图文教程 一. 下载安装VirtualBox 官网下载VirtualBox,目前版本:VirtualBox 5.1.8 for Windows hosts ...
- 本地的html怎么直接通过路径就读取本地文件。
我要做的事情是已知一个目录的相对路径,获得这个路径下面所有的txt文件,然后读到一个JS Script里面做下一步处理. 网上的例子都是使用input的,既然我是local的html文件,也知道路径了 ...
- Qt 学习笔记 TreeWidget 增删改
在窗体上放一个TreeWidget控件和四个PushButton加一个Horizontal Spacer 布局如图 给树添加元素节点的方法和实现 .h文件 QTreeWidgetItem * AddT ...