实现

截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于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. POJ 1163 The Triangle(简单动态规划)

    http://poj.org/problem?id=1163 The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissi ...

  2. tornado web 框架的认识

    tornado 简介 1,概述 Tornado就是我们在 FriendFeed 的 Web 服务器及其常用工具的开源版本.Tornado 和现在的主流 Web 服务器框架(包括大多数 Python 的 ...

  3. CAD调试时抛出“正试图在 os 加载程序锁内执行托管代码。不要尝试在 DllMain 或映像初始化函数内运行托管代码”异常的解决方法

    这些天重装了电脑Win10系统,安装了CAD2012和VS2012,准备进行软件开发.在调试程序的时候,CAD没有进入界面就抛出 “正试图在 os 加载程序锁内执行托管代码.不要尝试在 DllMain ...

  4. linux 中部署ant编译的包中缺少问题

    今天遇到在window上部署ant编译的包,能运行正常,但部署在linux中出现跳不进jsp中,出现404问题,后来经过排查在jsp中<%@taglib prefix="c" ...

  5. datatables服务器端分页要点

    背景:当要查询大量数据的时候,有datatables自身的分页,明显查询比较慢,这是要使用服务器端分页 参数:"bServerSide": true, "fnServer ...

  6. 多文档上传(upload multiple documents)功能不能使用怎么办?

    问题描述: 在SharePoint 2010的文档库里选择documents标签,然后选择upload document下拉菜单,你会发现upload multiple documents那个按钮是灰 ...

  7. 使用libjpeg.framework压缩UIImage

    +(void)writeFile:(NSString *)filePath withQuality:(int)quality { //初始化图片参数 UIImage *image=[UIImage i ...

  8. DRY(Don't Repeat Yourself )原则

    凡是写过一些代码的程序猿都能够意识到应该避免重复的代码和逻辑.我们通过提取方法,提取抽象类等等措施来达到这一目的.我们总能时不时的听到类似这样的话:”把这些公用的类放到shared项目去,别的项目还要 ...

  9. 迷你MVVM框架 avalonjs 实现上的几个难点

    经过两个星期的性能优化,avalon终于实现在一个页面绑定达到上万个的时候不卡顿的目标(angular的限制是2000).现在稍作休息,总结一下avalon遇到的一些难题. 首先是如何监控的问题.所有 ...

  10. TCP状态

    TCP状态 TCP连接中包含不同的状态,如何通过状态来判断程序问题尤为重要. 三次握手 图中的connection部分为三次握手. 四次握手 图中的close部分为四次握手. CLOSE_WAIT 服 ...