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 ...
随机推荐
- 前端开发神器sublime Text
实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少 ...
- 在React 组件中使用Echarts
在完成一个需求的时候碰到一个场景需要使用柱状图.涉及到可视化,第一反应当然是Echarts了.平时用js加载Echarts组件很方便,但是在React中就要费下神了.各种连蒙带猜实现了.edmo里的E ...
- yii笔一----基础,安装,结构,增删改查基本操作
从yii中文站开始http://www.yiichina.com/ Yii 是一个高性能,基于组件的 PHP 框架 一. 1.安装yii方式 composer安装或者下载一份应用程序模板.刚开始学习, ...
- C# 5.0 异步编程
在C#5.0中,增加了一个强大的新功能--异步编程.( .NET FrameWork4.5 版本) 它以两个新型关键字出现: ·async ·await 1.Async方法有三种返回类型: asyn ...
- c#动态编译并动态生成dll
/// <summary> /// 动态编译并执行代码 /// </summary> /// <param name="code">代码< ...
- Web 入门之 XML
160916 1. 什么是XML? XML 是 EXtensible Markup Language 的缩写,称为可扩展标记语言,所谓可扩展指用户可根据XML规则自定义标记.例子1-1 = ...
- C# winfrom HttpWebRequest 请求获取html网页信息和提交信息
string result =GetRequest("http://localhost:32163/DuoBao/ajax.aspx", "time=5"); ...
- ios 关于问题 no matching provisioning profiles found
ios 关于问题 no matching provisioning profiles found
- 用jdbc访问大段文本数据
package it.cast.jdbc; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.F ...
- New Career
Today I received the official confirmation letter with very good grade for the probation, it means t ...