css截断长文本显示
实现
截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于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 ...
随机推荐
- Hibernate多对多双向关联的配置
Hibernate的双向多对多关联有两种配置方法:那我们就来看看两种方案是如何配置的. 一.创建以各自类为类型的集合来关联 1.首先我们要在两个实体类(雇员<Emploee>.工程< ...
- Nginx 配置从零开始
作为一个 nginx 的初学者记录一下从零起步的点滴. 基本概念 Nginx 最常的用途是提供反向代理服务,那么什么反向代理呢?正向代理相信很多大陆同胞都在这片神奇的土地上用过了,原理大致如下图: 代 ...
- setprecision、fixed、showpoint的用法总结
首先要加头文件:iomanip 一:setprecision 作用:控制输出流显示浮点数的数字个数,setprecision(n)就是输出的n个数,会有四舍五入. 比如:double s=20.784 ...
- C#基础_单例模式
控制某个类型的实例数量-唯一一个 class Program { static void Main(string[] args) { test t1 = test.GetInstance(); tes ...
- PHP中Strict Standards错误解决方法二
在PHP5.3.3 中安装wordpress 3.0.1 ,在安装时出现错误:Strict Standards: PHP Strict Standards: Declaration of Walker ...
- CYQ.Data V4系列全面开源(2013-08-04)
致各位.NET开发者: 考虑到本人开源作品太多,个人维护力度有限,故自2013-08-04开始,开放原本需要授权使用的V4系列的最高版本V4.55的框架源码,同时也开放相对应的辅助工具源码,自此,V4 ...
- 可在广域网部署运行的QQ高仿版 -- GGTalk总览
(最新版本:V5.5,2016.12.06 增加对MySQL数据库的支持.) (android移动端:2015.09.24 最初发布 ,2016.11.25 最后更新) GGTalk(简称GG)是 ...
- ReactJS实践(一)—— FrozenUI React化之Loading组件
在前面我们通过四篇文章入门了React的大部分主要API,现在则开始进入实践环节. 实践系列的开篇打算拿我司的FrozenUI来试验,将其部分UI组件进行React化,作为第一篇实践文章,将以较简单的 ...
- Nova PhoneGap框架 第四章 本地数据库
我一直想把EntityFramework(简称EF)的那一套搬过来,应用于HTML5 SQLite. 幸运的是,我几乎做到了,有些功能无法完成的那是因为SQLite本身不支持.至少从现在已经完成的功能 ...
- python 栈和队列(使用list实现)
5.1.1. Using Lists as Stacks The list methods make it very easy to use a list as a stack, where the ...