如果想让某个容器（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. Bash shell的内建命令：type

    type指令是用来观察指令时来自于外部指令还是内建在bash中的指令. type  [-tpa]  name 选项与参数: :不加任何选项与参数时,type会显示出name是外部指令还是bash内建指 ...

  2. hdu 1159, LCS, dynamic programming, recursive backtrack vs iterative backtrack vs incremental, C++ 分类： hdoj 2015-07-10 04:14 112人阅读 评论(0) 收藏

    thanks prof. Abhiram Ranade for his vedio on Longest Common Subsequence 's back track search view in ...

  3. HalconMFC（三）之打开图像_简单处理

    在VS2010中配置完halcon之后就得写个最简单的程序满足一下咱们的自信心呀! 第一步,新建MFC程序 最好是按照下面这么设置然后点击"完成",就不会报错 第二步,导出C++代 ...

  4. SQL--create Table

    use MiddleHospitalgocreate table CMS_Infopublish_Auction( AuctionID int identity(1, 1) primary key,  ...

  5. JS 笔记（一）

    1. 页面引入 1) 标签直接引入脚本(推荐): <script type="text/javascript"> 脚本语言 </script> 2) 标签引 ...

  6. java1234初学maven

    第一讲: maven maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. maven安装与下载: .确定jdk已经安装并且配置 .安装mav ...

  7. CSS3扩展技术

    我们使用扩展技术编写代码时,需要先用编译器将我们的文件进行编译,编译后的文件才能够使用. less技术相关语法 less相对来说比较简单,语法也较少:     变量的定义:     @w:20px; ...

  8. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  9. Parameter index out of range (2 > number of parameters, which is 1)

    今天在实现一个功能时遇到一个问题,解决了很久.结果是#{}与${}使用错误的原因.但是具体原因还不是很清楚,写此篇总结,知道的可以交流. 具体描述为:通过教师的头衔(1高级讲师2首席讲师)及名称进行模 ...

  10. 运行带cocoa pods 的项目，遇到的问题是找不到文件，解决办法

    打开终端,进入项目所在的目录,也就是和Podfile在同一目录下,输入以下命令(由于已经有Podfile,所以不需要再创建Podfile):  pod update 过几秒(也许需要十几秒,取决于你的 ...