<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. Selenium模块化

    概述 高内聚低耦合是软件设计的一个基本原则. 内聚:从功能角度来度量模块内的联系,一个好的内聚模块应当恰好做一件事.它描述的是模块内的功能联系. 耦合:各模块之间相互连接的一种度量,耦合强弱取决于模块 ...

  2. 执行此安装程序之前,必须安装 32 位 Windows 映像处理组件(WIC)解决的方法

    我们在Windows Service 2003上安装 Microsoft .NET Framework4.0时常常出现以下的报错 执行此安装程序之前,必须安装 32 位 Windows 映像处理组件( ...

  3. iOS动画一点也不神秘————你是喜欢看幻灯片?还是看高清电影?

    iOS设备在平均线上硬件比andorid设备良好许多,尤其是内存和CPU,所以iOS应用里面有大量动画交互效果的交互,这是每个用户都喜悦的,如果每个操作对应界面来讲都是直接变化,那变得十分地生硬. 你 ...

  4. PHP: configure: error: mysql configure failed. Please check config.log for more information.

    为php增加mysql模块时报错 configure: error: mysql configure failed. Please check config.log for more informat ...

  5. for循环、穷举法和迭代

    循环:初始条件,循环条件,状态改变,循环体.for(初始条件;循环条件;状态改变){ 循环体}for(int i=1;i<=10;i++){ }例子:100以内与7有关的数.求100以内所有数的 ...

  6. http常见的get请求方式和set请求方式。

    一.Get请求方式 以下是我写的一个用get请求方式获取api工厂中汇率的类. package com.example; import java.io.BufferedReader; import j ...

  7. 临时笔记:flume+ CDH 的 twitter实例

    http://www.slideshare.net/OpenAnayticsMeetup/analyzing-twitter-data-with-hadoop-17718553 http://www. ...

  8. EntityFramework sum嵌套

    一个查询中 用到了 sum , 可是返回结果的小数有很多位 , 都不准确了..类似js中的小数运算一样...不太熟悉C#,不知道这问题是因为double的关系 , 还是因为代码写的问题 , 通过 sq ...

  9. HDU 1046 - Gridland

    果然是数学题 #include <iostream> #include <cstdio> #include <cmath> using namespace std; ...

  10. 设定MS SQL Server 2008定期自动备份

    1.说明 SQL Server2008 本身具有定期自动备份功能,我们只需要通过简单的配置就可以实现非常简单高效的自动备份功能. 2.打开SQL Server代理服务 要实现自动备份功能,首先要保证S ...