<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. JavaScript 轮播图

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circl ...

  2. struts.xml配置文件标签详解

    1.package: 作用:分模块化开发. 属性: name:包名. extends:由于struts2框架的一些核心功能的配置都在struts-default包中,所以一般都都直接或间接地继承str ...

  3. Yeslab现任明教教主数据中心第二门课程UCS 视频教程下载

    Yeslab现任明教教主数据中心第二门课程UCS 视频教程下载 视频教程目录 Yeslab现任明教教主数据中心第二门课程UCS.1.介绍UCS.rar Yeslab现任明教教主数据中心第二门课程UCS ...

  4. STL之nth_element()(取容器中的第n大值)

    nth_element()函数 头文件:#include<algorithm> 作用:nth_element作用为求第n大的元素,并把它放在第n位置上,下标是从0開始计数的,也就是说求第0 ...

  5. 3第一周课后练习&#183;阅读计划(3)-使用函数来访问私有数据成员

    /* * Copyright (c) 2015, 计算机科学学院,烟台大学 * All rights reserved. * 文件名:test.cpp * 作 靠:刘畅 * 完成日期:2015年 3 ...

  6. Category类别

    1.在已有类的基础上进行扩展,无需像继承一样子类化,就可以直接添加一些方法 2.继承不仅可以添加方法还可以添加属性,类别只能添加方法 3.类别不会改变现有类的方法,万一重写,自己写的优先级高 4.把类 ...

  7. Windows下安装PHP扩展及资源下载地址(memcached为例)

    官方下载的php安装包ext目录里以经包含了常用的php扩展,但某些情况下并不能满足我们项目需求,比如memcache扩展就不在官方的php安装包里.这时就需要我们自己去下载安装. 本文列出php官方 ...

  8. Canvas基础学习(一)——实现简单时钟显示

    HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些 ...

  9. oracle全文检索笔记

    1.删除词法解析器 exec ctx_ddl.drop_preference('my_lexer'); 2.创建中文词法解析器 exec ctx_ddl.create_preference ('my_ ...

  10. Python httplib学习

    httplib是python中http协议的客户端实现,可以使用该模块与HTTP服务器进行交互. 如示例1: import httplib url = "www.126.com"c ...