实现

截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于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截断长文本显示的更多相关文章

  1. CSS控制长文本内容显示(截取的地方用省略号代替)

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法. 现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行 ...

  2. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

  3. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  4. css 之单行文本显示省略和多行文本省略

    一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...

  5. 【css】长文本左侧显示省略号

    classnames: https://blog.csdn.net/duola8789/article/details/71514450 react普通样式 行内样式: https://blog.cs ...

  6. css text-overflow溢出文本显示省略号

    <div style="width: 100px; overflow: hidden; text-overflow:ellipsis"> <nobr>当对象 ...

  7. (轉)CSS 单行溢出文本显示省略号...的方法(兼容IE FF)

    轉自:http://www.cnblogs.com/hlz789456123/archive/2009/02/18/1392972.html html代码:<div><p>&l ...

  8. css 溢出文本显示省略号

    这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...

  9. webView文本长按显示英文

    webView文本长按显示英文时,在info.plist文件中添加如下内容: <key>CFBundleLocalizations</key> <array> &l ...

随机推荐

  1. GIT 版本控制常用命令学习汇总

    GIT 版本控制常用命令汇总 git version 查看当前git版本信息 git help 获取全部命令帮助信息 git help <command> 获取指定命令帮助信息 git c ...

  2. 高通AR和友盟SDK的AndroidManifest.xml合并

    高通AR和友盟SDK的AndroidManifest.xml合并 因为高通的AR在android中一开始就要启动,所有主Activity要设置为高通的Activity,即android:name=&q ...

  3. nginx config

    from : http://www.ha97.com/5194.html 更详细的模块参数请参考:http://wiki.nginx.org/Main #定义Nginx运行的用户和用户组user ww ...

  4. ★★★Oracle sql 传参特别注意★★★

    最近遇到一个非常烦人的问题,用传参的方式执行sql语句结果老是报 Oracle ORA-01722: 无效数字 一直无法找到原因. 表结构大致如下: table test_station ( tblR ...

  5. js判断地址转向

    <script type="text/javascript"> if (navigator.userAgent.search(/iphone|ipod|ipad|And ...

  6. 关于Java8函数式编程你需要了解的几点

    函数式编程与面向对象的设计方法在思路和手段上都各有千秋,在这里,我将简要介绍一下函数式编程与面向对象相比的一些特点和差异. 函数作为一等公民 在理解函数作为一等公民这句话时,让我们先来看一下一种非常常 ...

  7. (DNS被劫持所导致的)QQ音乐与视频网页打开很慢的解决方法

    这周开始发现一个很让人抓狂的现象,QQ音乐网页(http://y.qq.com)与QQ视频(http://v.qq.com/)网页打开超慢,甚至是无法打开,严重影响了业余的音乐视频生活. 以QQ视频为 ...

  8. 玩转Windows服务系列——无COM接口Windows服务启动失败原因及解决方案

    将VS创建的Windows服务项目编译生成的程序,通过命令行 “服务.exe -Service”注册为Windows服务后,就可以通过服务管理器进行管理了. 问题 通过服务管理器进行启动的时候,发现服 ...

  9. FTP文件服务搭建与同步传输

    需求       搭建一台FTP服务器,用于文件的上传与下载:同时将FTP服务器目录中的文件同步到多个服务器中,实现同步更新,同时文件需要控制用户访问对应的文件夹权限. 需要用到的软件有:bestsy ...

  10. TroubleShooting笔记--快照进程sp_replupdateschema和索引重建发生冲突

    今天早上服务器出现大面积的阻塞,上去排查blocking,最后大概确定的问题是: rebuild index job(243) --->blocked--->sp_replupdatesc ...