CSS文字截取功能实现代码

好处是：
兼容IE，firefox，Opera;
有利于内容完整性;有利于SEO;
无需后台程序处理;
可以在前台随时调节要截取的长度。

不好的地方：
不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。

另外在设置截取宽度的时候，要注意，尽量让文字截取完整。

Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>css文字截取</title>  
<style type="text/css">  
body{font-size:13px;color:#8c966b;}   
div{clear:both;width:340px;border:1px solid #333;margin:3px;padding:3px;}   
div a{color:#8c966b;text-decoration:none;}   
div a:hover{text-decoration:underline;}

div a{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left;   
    -o-text-overflow: ellipsis;    /* for Opera */   
    text-overflow:ellipsis;        /* for IE */   
}   
div:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */   
</style>  
</head>

<body>

用css来实现自动截取文字，不需要后台程序和JS的使用

好处是：有利于内容完整性，有利于SEO，无需后台程序处理，可以在前台随时调节要截取的长度。

<div><a href="#">不好的地方：不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。</a></div>  
<div><a href="#">另外在设置截取宽度的时候，要注意，尽量让文字截取完整</a></div>

</body>  
</html>

赞 (0)

相关推荐

  • 用css截取字符的几种方法详解（css排版隐藏溢出文本）

    方法一: 复制代码 代码如下: <div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串  </div> 说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号.缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比. 方法二: 复制代码 代码如下: <

  • 多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    .linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /

  • 用CSS解决中英文混合字符串的截取省略问题的解决办法

    作为一个程序员,经常需要面对的一个问题就是在新闻等信息的标题列表中,常常为了适应表格的宽度,需要对过长的标题文字的进行截取并在截取后的文字末端加上省略号. 众所周知,有很多方法可以实现这个功能,JavaScript,ASP,PHP都有各自的实现方法,但是面临的问题有很多,比如中英文混杂时或在某些编码下,容易造成截取出现乱码的问题,虽然大多数问题已经有比较成熟的解决方案,但在数据量比较大时,使用JavaScript,ASP,PHP实现这一功能,无疑会给客户端或服务器端造成比较大的资源开销. 随着W

  • CSS文字截取功能实现代码

    好处是: 兼容IE,firefox,Opera; 有利于内容完整性;有利于SEO; 无需后台程序处理; 可以在前台随时调节要截取的长度. 不好的地方: 不能自动判断截取长度,当字符很短的时候在Firefox中也会生成后面的省略符号. 另外在设置截取宽度的时候,要注意,尽量让文字截取完整. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • JS+CSS实现分类动态选择及移动功能效果代码

    JS+CSS实现分类动态选择及移动功能效果代码

    本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码.分享给大家供大家参考,具体如下: 这是一个类似选项卡功能的选择插件,与普通的TAb区别是加入了动画效果,多用于商品类网站,用作商品分类功能,不过其它网站也可以用,点击运行一下你会知道它的奥妙,它用JavaScript模拟出了Flash动画的效果,很贴切. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cha-type-move-style-demo/ 具体代码如下: <

  • 基于JS实现密码框(password)中显示文字提示功能代码

    基于JS实现密码框(password)中显示文字提示功能代码

    其实实际上实现中并不能让password中显示文字提示,但是我们在工作中有这样的需求,当没输入东西的时候,框内有提示输入密码,但是当输入东西的时候又显示的是*号,那么是如何实现的呢?其实原理很简单,就是放两个文本框,样式以及定位都是一样的.先将type为password的隐藏,只显示type为text的伪密码框,value设置提示内容例如请输入密码.然后当input触发的时候,type为text的input隐藏,让type为password的input显示出来.然后当检测password的val

  • android阅读器长按选择文字功能实现代码

    android阅读器长按选择文字功能实现代码

    前言: 有时候我们需要实现长按选择文字功能,比如阅读器一般都有这个功能,有时候某个自定义控件上可能就有这种需求,如何实现呢?正好最近还算闲,想完善一下自己写的那个轻量级的txt文件阅读器(比如这个长按选择文字的功能就想加进去).于是花了两三天时间,实现了这个功能,效果还是不错的. 首先先看看效果图吧: 授人以鱼不如授人以渔,下面具体实现原理的教程. 1.实现原理 原理其实也不难,简单总结就是:绘制文字时把显示的文字的坐标记录下来(记录文字的左上右上左下右下四个点坐标),作用就是为了计算滑动范围.

  • JS实现中英文混合文字溢出友好截取功能

    JS实现中英文混合文字溢出友好截取功能

    在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及 字符串的length属性 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. substring() 方法用于提取字符串中介于两个指定下标之间的字符. 对于非中文的字符串处理是很简单的,但是中文字符的 length  属性值 是1  而不是 2 ,所以处理就不是很友好了. 例如  你有一个字符串   'abcdefg' 和   '我爱中

  • 十行Python代码实现文字识别功能

    十行Python代码实现文字识别功能

    目录 1.环境和配置要求 百度接口 2.具体实现步骤 获取截图 调用Baidu aip识别并打印文字 调用打包程序生成专属识别文字小程序 今天给大家分享的主题是用百度的接口实现图片的文字识别. 1.环境和配置要求 整体是用Python实现,所需要使用的第三方库包括aip.PIL.keyboard.pyinstaller,如未安装,可在CMD中使用pip install Baidu-AIP/pillow/keyboard/pyinstaller指令安装. 百度接口 打开网址,如未注册请先注册,然后

  • MUI 上拉刷新/下拉加载功能实例代码

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldown/ <!--下拉刷新容器--> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> &l

  • JS实现的新浪微博大厅文字内容滚动效果代码

    JS实现的新浪微博大厅文字内容滚动效果代码

    本文实例讲述了JS实现的新浪微博大厅文字内容滚动效果代码.分享给大家供大家参考,具体如下: 新浪微博大厅滚动tweets-slide,JavaScript实现,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过今天发现这款竟然还要好,不敢独享,希望需要的朋友喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-txt-scroll-tweets-slide-codes/ 具体代码如下: <!doctype html>

  • jQuery实现动态文字搜索功能

    jQuery实现动态文字搜索功能

    先简单讲一下需求:页面中会列出多行个人信息记录,为方便查找,在顶层增加一个搜索栏,可根据用户姓名查找记录. 如果只想查看代码,可跳过分析过程,文章底部提供了完整的代码. 以下是我的编写过程: 动态页面,多条记录均由forEach生成,结构如下: <form name="userForm"> <table style="width:200px;"> <thead> <tr> <th> </th>

  • vue input实现点击按钮文字增删功能示例

    vue input实现点击按钮文字增删功能示例

    本文实例讲述了vue input实现点击按钮文字增删功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1

随机推荐