如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...,可以使用text-overflow:clip|ellipsis
基本语法：text-overflow : clip | ellipsis
若为text-overflow:clip  取默认值，不显示省略标记(...)，而是简单的裁切
若为text-overflow:ellipsis  当对象内文本溢出时显示省略标记(...)  
例如：
<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

  <style type="text/css">

	#box{

		width:100px;

		background-color:#87CEEB;

		overflow:hidden;

		text-overflow:ellipsis;

		white-space:nowrap;

	}

  </style>

 </head>

 <body>

  <div id="box">helloworldhelloworldhelloworldhelloworldhelloworldhelloworld</div>

 </body>

</html>

注：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用

1.一定要给容器定义宽度.

2.如果少了overflow: hidden;文字会横向撑到容易的外面

3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉

4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.

CSS中的text-overflow:clip|ellipsis的使用的更多相关文章

  1. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  2. 转: CSS中overflow的用法

    Overflow可以实现隐藏超出对象内容,同时也有显示与隐藏滚动条的作用,overflow属性有四个值:visible (默认), hidden, scroll, 和auto.同样有两个overflo ...

  3. CSS中position和header和overflow和background

    <!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...

  4. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  5. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  6. CSS中overflow:hidden

    CSS中,overfllow:hidden的作用是隐藏溢出 比如:<div style="width:300px;overflow:hidden" id=1><d ...

  7. 转：css中overflow:hidden 不起作用了吗？

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  8. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  9. CSS中控制换行的四种属性

    一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例. Example Source Code 语法: white-space : normal  ...

随机推荐

  1. 聊聊css hack

    什么是CSS hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如 ...

  2. 也谈自动化平台的搭建，另附高大上的名字---无人值守定时巡检系统(selenium+testng+ant+jenkins)

    最近公司新项目改版,由于没有运维,开发则负责上线任务,并且都是手动上线,并行的项目多了,分支混乱,经常导致B项目上线覆盖A项目,导致系统不定时出现异常,老板知道了便扣了大家的绩效,作为测试这边必须想个 ...

  3. Eclipse中怎么安装TestNG单元测试框架

    在进行使用的eclipse的进行开发的代码中,必然就会需要进行单元测试,在单元测试的情况提供较多的框架单元测试,例如使用junit单元测试,而在国外进行开发较好的单元测试,提供了较好的测试的报告,ju ...

  4. redis-JedisPoolConfig配置

    项目之前要使用redis这个临时缓存,下面是从别的大神那里转来的一些基本配置属性的说明:   JedisPoolConfig config = new JedisPoolConfig(); //连接耗 ...

  5. Yii 多个子目录同步登录

    ---恢复内容开始--- 配置文件中:  1 'components'=>array( 'user'=>array( 'class'=>'CWebUser', 'identityCo ...

  6. Ext JS 4 新特性2：配置项属性（config）之一

    Ext JS 4 新特征2:配置项属性config 最新版本的Ext JS 4.2的另外一个伟大的新特征就是增加了configuration配置项属性,当我们在创建一个新类的时候,经常性的要设置某某属 ...

  7. iOS开发笔记1:[转]导航栏里的"Back"按钮显示不出来

    最近项目中遇到一个问题,push过去的ViewController的Nav上面没有返回按钮,遂搜索资料,找到了以下文档.经测试i,问题解决. 原文地址:http://www.cnblogs.com/s ...

  8. 北大poj- 1067

    取石子游戏 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 40058   Accepted: 13520 Descripti ...

  9. 自定义属性的时候，尽量不要使用value这个命名

    最近我在重写select下拉组件时,使用ul->li来模拟select中的一个个option,并给li添加索引,取名为value. 非IE浏览器下value值工作正常,但是IE下value值工作 ...

  10. Varnish介绍

    “Varnish是一款高性能的开源HTTP加速器,挪威最大的在线报纸 Verdens Gang (http://www.vg.no) 使用3台Varnish代替了原来的12台squid,性能居然比以前 ...