1. <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完美解决这个问题,

  1. white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!-- 就这三句,,,嘿嘿....->

如何实现CSS限制字数,超出部份显示省略号的更多相关文章

  1. 怎么实现CSS限制字数,超出部份显示点点点.

    如何实现CSS限制字数,超出部份显示点点点... <div style="width:200px; white-space:nowrap;overflow:hidden;text-ov ...

  2. CSS限制字数,超出部份显示点点点...

    最近项目中需要用CSS实现限制字数,超出部份显示点点点...,只需要一下代码即可: width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字 ...

  3. (转)如何实现CSS限制字数,超出部份显示点点点...

    <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...

  4. 如何实现CSS限制字数,超出部份显示点点点...

    <div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1 ...

  5. css 控制文字超出部分显示省略号

    该文章转自:http://www.daqianduan.com/6179.html 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽 ...

  6. css 控制文字超出时显示省略号

    不多说,直接看代码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  7. css设置内容超出后显示省略号

    1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

  8. CSS控制 文字超出部分显示省略号

    实现单行文本的溢出显示省略号, (需要加宽度width属来兼容部分浏览) <p style="width: 100px;overflow: hidden;white-space: no ...

  9. css设置文字超出部分显示省略号。。。

    兼容IE/Firefox/Chrome display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

随机推荐

  1. IDEA如何导出war包

    网上有很多关于IDEA导出war包的教程,然而很多照着一步步操作以后,war包并不能在对应目录中找到.参考网上一篇博文,发现其方法描述比较详细且经验证有效. 完整流程如下: 首先点击这里进入项目的配置 ...

  2. Docker简易安装教程

    Docker介绍 Docker 是一种开源容器化技术,用于构建和容器化应用程序.Docker 使用客户端-服务器架构.Docker客户端与 Docker守护进程对话,后者负责构建.运行和分发 Dock ...

  3. 裸奔mysql

    centos 7 下裸奔mysql # vim /etc/my.cnf在[mysqld]的段中加上一句:skip-grant-tables例如:[mysqld]datadir=/var/lib/mys ...

  4. 利用 cgroup 的 cpuset 控制器限制进程的 CPU 使用

    最近在做一些性能测试的事情,首要前提是控制住 CPU 的使用量.最直观的方法无疑是安装 Docker,在每个配置了参数的容器里运行基准程序. 对于计算密集型任务,在只限制 CPU 的需求下,直接用 L ...

  5. Java方法01——什么是方法

    例子 package method;public class Demon02 { //main 方法 public static void main(String[] args) { //实际参数:实 ...

  6. Typora加七牛云实现实时图片自动上传

    Typora加七牛云实现实时图片自动上传 前言: ​ Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术,这也是与其他Markdown编辑器最显著的区别.重点是免费! ​ 其风格简约 ...

  7. 卓越的教练是如何训练高手的?(谈谈memmove)

    编者按:我们知道,优秀的运动员除了自身的天赋和努力之外,出色的教练必不可少.一个成功的企业除了拥有出类拔萃的员工之外,同样需要一位出色的教练,那就是企业的CEO.由此可见,如果我们要想成为一位优秀的程 ...

  8. vim的代码缩进

    例如下面一段代码: 现在要统一缩进6个tab,在UltraEdit里首先要选中文本,然后按6次tab,VIM中的操作是:首先按V(shift+v)进入行visual模式,然后按7次j选中这段文本(或者 ...

  9. JavaScript学习01(js概述)

    JavaScript概述 JavaScript历史 要了解JavaScript,我们首先要了解一下JavaScript的诞生. 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成 ...

  10. Linux之cat tail less常见用法

    1.cat 通常查找出错误日志 cat error.log | grep 'foo' , 这时候我们还有个需求就是输出当前这个日志的前后几行: cat error.log | grep -C 10 ' ...