实现

截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于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. session跟cookie的区别

    这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...

  2. Odoo 报表中添加空格

    如果  不起作用,请用 代替.

  3. yii笔一----基础,安装,结构,增删改查基本操作

    从yii中文站开始http://www.yiichina.com/ Yii 是一个高性能,基于组件的 PHP 框架 一. 1.安装yii方式 composer安装或者下载一份应用程序模板.刚开始学习, ...

  4. Centos 编写 service 启动

    Centos 系统服务脚本目录: [html] view plaincopyprint?   /usr/lib/systemd/ 有系统(system)和用户(user)之分, 如需要开机没有登陆情况 ...

  5. CoolPlist 帧动画自动生成工具

    工具英文名称:CoolPlist作者: 陈前帆 thinkingMan | sonny 邮箱: 625936034@qq.com | chenqianfan1@163.com电话: 136704713 ...

  6. Java NIO1:I/O模型概述

    I/O模型 在开始NIO的学习之前,先对I/O的模型有一个理解,这对NIO的学习是绝对有好处的.我画一张图,简单表示一下数据从外部磁盘向运行中进程的内存区域移动的过程: 这张图片明显忽略了很多细节,只 ...

  7. JS、JQuery和ExtJs的跨域处理

    1.什么是跨域?跨域,JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象.简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a. ...

  8. 到底应该选择那种Linux.NET的部署方式?

    当前部署Linux.NET环境的方式可谓是五花八门,既有传统的源码编译的方式.又有各式各样的一键安装脚本.还有绿色包安装方式,而随着Mono官方的新站上线,更增加了采用RPM包的部署方式.那对于一名L ...

  9. WCF basicHttpBinding之Transport Security Mode, clientCredentialType="None"

    原创地址:http://www.cnblogs.com/jfzhu/p/4071342.html 转载请注明出处 前面文章介绍了<WCF basicHttpBinding之Message Sec ...

  10. Java中instanceof和isInstance区别详解

     一次性搞定instanceof和isInstance,instanceof和isInstance长的非常像,用法也很类似,先看看这两个的用法: obj.instanceof(class) 也就是说这 ...