<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>

效果:

语法:

text-overflow : clip | ellipsis

参数:

clip :  不显示省略标记(...),而是简单的裁切

(clip这个参数是不常用的!)

ellipsis :  当对象内文本溢出时显示省略标记(...)

说明:

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

示例:

div { text-overflow : clip; }

text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50 个汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text- overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样 才能实现溢出文本显示省略号的效果。

有的时候的某段文本太长了,会影响整个的布局,很多人用动态语言来解决这个问题,但必须区分中文和英文,因为中文相当于两个英文字符长度,这样不仅繁琐,而且加重了服务器的负担。其实,我们完全可以使用CSS完美解决这个问题,

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

CSS实现限制字数功能的更多相关文章

  1. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  2. 使用CSS禁止textarea调整大小功能的方法

    这篇文章主要介绍了使用CSS禁止textarea调整大小功能的方法,禁止可以调整textarea大小功能的方法很简单,使用CSS的resize属性即可,需要的朋友可以参考下 如果你使用谷歌浏览器或火狐 ...

  3. HTML&CSS基础-html注释功能

    HTML&CSS基础-html注释功能 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.什么是HTML(Hypertext Markup Language) 超文本标记 ...

  4. CSS选择器实现搜索功能 驱动过滤搜索技术

    一.CSS选择器可以用来实现搜索功能 CSS选择器可以用来实现搜索功能. 作者以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,用来过滤和搜索页面元素. ...

  5. 【jQuery UI 1.8 The User Interface Library for jQuery】.学习笔记.1.CSS框架和其他功能

    jquery.ui.all.css 1.所有主题必须的文件都包含在这个文件中.它由ui.base.css和ui.them.css两个文件中拉入的@import执行构成. jquery.ui.base. ...

  6. ASP.NET MVC 中CSS JS压缩合并 功能的使用方法

    通过压缩合并js文件和css文件,可以减少 服务器的响应 次数和 流量,可以大大减小服务器的压力,对网站优化有比较明显的帮助!压缩合并 css 文件和js文件是网站优化的一个 比较常用的方法. ASP ...

  7. js+html+css简单的互动功能页面(2015知道几乎尖笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2

    js+html+css实现简单页面交互功能(2015知乎前端笔试题) http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html? from=y1.7-1. ...

  8. HTML和CSS一般有哪些功能?(聊~平时常出现的那些知识)

    简单一点点 HTML行内标签有哪些? 一般行内的标签包含哪些? 如:a - 锚点, span - 常用内联或定义块级容器, i - 斜体, b - 粗体, strong - 粗体强调, var - 定 ...

  9. Zend Studio 上 安装使用Aptana插件(html,css,js代码提示功能) .

    最近装了zend studio 9.0 用了段时间发现写html,css,js代码没提示,要开dreamwaver(对js代码提示也不好).就网上搜索了下,发现了Aptana插件,装上用了下,感觉不错 ...

随机推荐

  1. ASP无惧上传类不能上传中文双引号文件及ASP函数InStr存在bug

    ASP无惧上传类不能上传中文双引号文件及ASP函数InStr存在bug 近日发现eWebEditor V2.8 asp 版本上传文件文件名不能包含中文双引号,发现eWebEditor使用ASP“无惧上 ...

  2. 提高你的Java代码质量吧:小心switch带来的空值异常

    一.分析  使用枚举定义常量时,会有伴有大量的switch语句判断,目的是为每个枚举解释其行为. 我们知道,目前的Java的switch语句只能判断byte.short.char.int类型(JDK7 ...

  3. PreferenceFragment 使用 小结

    Perference也就是我们常说的偏好设置,首选项设置,能够自己主动保存一些数据,比如我们在上一次使用的时候的一些内容,则在下一次启动后依旧生效,而不须要再进行配置.当用户改变设置时,系统就会更新S ...

  4. 每日一发linux命令

    很多用虚拟机的同学在向/tmp目录下进行解压的时候,会发现之前挂载的此目录空间不足,导致下一步无法进行(我在vmwaretools解压的时候就遇到了这个problem)…… 实际上,/tmp是可以进行 ...

  5. 关于.netFramework概述

    这几天学了不少东西,想来还是应该总结一下,一来自己回顾一下,二来也怕自己忘记,在文章中,有很多东西就是借鉴别人的blog,笔者在这里对他们的无私奉献表示感谢.笔者的语言组织能力有限,如果在文章中出现什 ...

  6. WebApi 文件上传

    1. 注意给form表单加上enctype = "multipart/form-data" 属性,否则会导致Action的参数HttpPostedFileBase 对象接收不到文件 ...

  7. 如何在美国公司写project plan 邮件--以hadoop安装和Mahout数据分析为例子

    Hi, XXX (boss name) Project Title:  Hadoop installation and Data analysis based on Mahout Deliverabl ...

  8. C#实现WinForm传值实例解析

    C#实现WinForm传值的问题经常会做为公司面试的题目,那么作为学习C#以及WinForm传值,我们需要掌握哪些方法和思路呢?下面我们就向你介绍详细的思路和实现的具体步骤,希望对你有所帮助. C#实 ...

  9. Java虚拟机:JVM中的Stack和Heap

    简单的了解一下JVM中的栈和堆 在JVM中,内存分为两个部分,Stack(栈)和Heap(堆),这里,我们从JVM的内存管理原理的角度来认识Stack和Heap,并通过这些原理认清Java中静态方法和 ...

  10. Apache无法启动解决方案

    Apache无法启动错误原因: 原因一:80端口占用例如IIS,另外就是迅雷.我的apache服务器就是被迅雷害得无法启用! 原因二:软件冲突装了某些软件会使apache无法启动如Dr.com 你打开 ...