如果想让某个容器（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. 转一个 Xcode 7 缺少 *.dylib库的解决方法

    Xcode7中 Link Binary With Libraries 没有 .dylib库,只能找到对应的 .tbd,但不能代替使用,通过查找资料,尝试后得到以下两种解决方法. 方法1. (heqin ...

  2. 第九篇.bootstrap导航

    创建一个标签式的导航菜单的步骤是: 在ul标签上加上class  nav 再ul标签上加上 class .nav-tabs. 在li标签上加上 active表示激活该项 <ul class=&q ...

  3. mysql启动报错The server quit without updating PID file

    现网mysql无法启动是很让人头疼的,数据很有可能恢复不了,解决方法如下: 查看mysql目录下的日志,根据日志来锁定错误原因(mysql的错误日志很抽象) a.如果日志不能提供任何帮助则可进行以下步 ...

  4. JDK动态代理与CGLib动态代理

    1.JDK动态代理 JDK1.3以后java提供了动态代理技术,允许开发者在运行期创建接口的代理实例,动态代理是实现AOP的绝好底层技术. JDK的动态代理主要涉及到java.lang.reflect ...

  5. VS调试时下不到断点的处理方式。

    调试无法命中断点的情况我想很多人遇到过,反正我是遇到过很多次了,有时候是没有生成项目或解决方案,有时候是调试版本不一致. 当然还有其他的情况都已经忘记如何处理的了. 今天在release模式下要调试代 ...

  6. python中if __name__ == '__main__': 的解析

    当你打开一个.py文件时,经常会在代码的最下面看到if __name__ ==  '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一 ...

  7. css渐变色DIV

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  8. Oracle计算时间函数(对时间的加减numtodsinterval、numtoyminterval) (转)

    原文来自:http://blog.itpub.net/756652/viewspace-697256/ 11g interval分区,按天分区,需要用到函数numtodsinterval.   cre ...

  9. Performance Considerations for Entity Framework 4, 5, and 6

    Performance Considerations for Entity Framework 4, 5, and 6 https://msdn.microsoft.com/en-sg/data/hh ...

  10. sql语句格式化数字(前面补0)、替换字符串

    以下是详细分析: 1.select power(10,3)得到1000(即:10的3次方) 2.select cast(1000+33 as varchar) 将1000转换类型(即:将int转化成v ...