实现
截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于SEO。
而通过前端css的截断,则灵活多变,可统一运用与整个网站。
这项技术主要运用了text-overflow属性,这个虽是css3的属性,但是在各大浏览器却兼容
非常好,ie6系列全部兼容。
.e{
display:inline-block;width: 40px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.e:hover{
cursor: pointer;text-overflow: clip;width: auto;
} <span class='e'>abcdddsdsafdsacdsavdsac</span>
宽度需要指定,这样设置隐藏的宽度,而且也可出发IE67的hasLayout。
css截断长文本显示的更多相关文章
-
CSS控制长文本内容显示(截取的地方用省略号代替)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...
-
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
http://www.52css.com/article.asp?id=602 =================================================== html ...
-
新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
-
css 之单行文本显示省略和多行文本省略
一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...
-
【css】长文本左侧显示省略号
classnames: https://blog.csdn.net/duola8789/article/details/71514450 react普通样式 行内样式: https://blog.cs ...
-
css text-overflow溢出文本显示省略号
<div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...
-
(轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...
-
css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
-
webView文本长按显示英文
webView文本长按显示英文时,在info.plist文件中添加如下内容: <key>CFBundleLocalizations</key> <array> &l ...
随机推荐
-
Java直接内存与堆内存
NIO的Buffer提供了一个可以不经过JVM内存直接访问系统物理内存的类——DirectBuffer. DirectBuffer类继承自ByteBuffer,但和普通的ByteBuffer不同,普通 ...
-
jQuery基础之(四)jQuery创建DOM元素
利用DOM方法创建元素节点,通常要将document.createElement().document.createTextNode().appendChild()配合使用,十分麻烦. 而jQuery ...
-
IIS目录下文件共享后System.IO.File.Exists返回false
场景:在iis目录下,因为特殊需要共享一个文件夹,给到其他的技术人员访问,突然发现小小的操作,搞“大”了,使用 string path = Server.MapPath("~/file/te ...
-
multisim&;proteus&;protel比较
Multisim有超强板级的模拟/数字电路板的设计工作.它包含了电路原理图的图形输入.电路硬件描述语言输入方式,具有丰富的仿真分析能力.高版本可 以进行单片机等MCU的仿真.Multisim有实际元器 ...
-
poj 1149经典网络流构图
题意:m个猪圈,n个客户,每个客户给出选则猪圈的钥匙和需要购买猪的个数,其中每次客户购买时客户选则的猪圈数量可以相互更换,问最大购买数量. 思路:以客户作为除源点汇点之外的点,然后对于每个猪圈从源点连 ...
-
通过百度地图API--获取全国地图的经纬度
因为要做一个前端画图需要经纬度,一个个的查询过麻烦,最终弄出这个,以备后查! import threading , time import requests from decimal import D ...
-
canvas霓虹雨
在codepen上看到一个Canvas做的下雨效果动画,感觉蛮有意思的.就研究了下,这里来分享下,实现技巧.效果可以见下面的链接. 霓虹雨: http://codepen.io/natewiley/f ...
-
Java 编程下使用 Class.forName() 加载类【转】
在一些应用中,无法事先知道使用者将加载什么类,而必须让使用者指定类名称以加载类,可以使用 Class 的静态 forName() 方法实现动态加载类.下面的范例让你可以指定类名称来获得类的相关信息. ...
-
#1 // BZOJ 4361 isn
Description 给出一个长度为n的序列A(A1,A2...AN).如果序列A不是非降的,你必须从中删去一个数, 这一操作,直到A非降为止.求有多少种不同的操作方案,答案模10^9+7. 题 ...
-
如何在VMware中安装Linux系统
这篇文章主要讲述如何在VMware12中安装RHEL6.9Linux操作系统 步骤一: 打开VMware软件,在主页中点击创建新的虚拟机或者点击左上角文件,在列表中点击新建虚拟机,如图: 步骤二: 点 ...