文字超出DIV后,隐藏文字并显示...
<html>
<head>
<style type="text/css">
#cs{width:100px;height:50px;line-height:50px;color:#6699ff;border:1px #ff8000 dashed;overflow:hidden;text-overflow:ellipsis}
#cs2{width:200px;height:60px;line-height:20px;color:#6699ff;border:1px #ff8000 dashed;overflow:hidden;text-overflow:ellipsis}
</style>
</head>
<body>
<div id="cs">
<nobr>爱上你的微笑--文字超出显示省略号，大家可以复制这段代码进行实验下</nobr>
</div> <br>
<div id="cs2">
</div>
</body>
</html>
text-overflow:ellipsis溢出文本显示省略号的详细方法
语法：
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属性如何应用，我们作如下的说明讲解：
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。
文字超出DIV后,隐藏文字并显示...的更多相关文章
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
- 微信小程序文字超过行后隐藏并且显示省略号
在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...
- 文字超出DIV的边框
已经给div设置了高宽,但是文字还是会戳出div而不是换行 鼓捣了一下好像是因为这个原因 如果全是 aaaaaaaaaaaaaaaaaaaaa 这样的纯英文,那么测试的时候是不会换行的,因为浏览器认为 ...
- div中包着文字，div出现隐藏的时候，文字总是在div外面。
背景: 给博客加一个侧边栏,点击出现隐藏,每次点击出现或者隐藏,文字总是很突兀的就出来了. 解决: overflow:hidden
- QTextEdit/QPlainTextEdit添加文字超出视图后，滚动条自动移至最底部
void ThreadExit::onTaskPerformState(const QString& strStatus) { //追加文本(ui.taskStatusTextEdit是一个Q ...
- 段落超出div部分隐藏显示
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 设置表格td超出内容后截取并以...显示
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <table style=" ...
- CSS实现超出DIV宽度文字自动隐藏并显示省略号
当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...
随机推荐
- unix & linux oralce用户 内存使用情况分析
Linux*********************************************************************************************** ...
- C#中的动态特性
众所周知,C#和Java一样,都是一门静态语言.在C# 4.0之前,想要和动态语言(诸如Python.Javascript等)进行方便地互操作是一件不太容易的事情.而C# 4.0为我们带来的dynam ...
- 高效C++规划
推荐写C++代码风格.看似easy.坚持不易,且写且珍惜! --陈国林 1. 版本号和版本号声明 版本号和版本号文件声明位于头文件和定义文件的开头,主要内容 (1)版本号信息 (2)文件名.标识符.摘 ...
- Tempdb怎么会成为性能瓶颈
原文:Tempdb怎么会成为性能瓶颈 转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/01/25/tempdb.aspx 我曾经遇到过这样一个性能问题. ...
- hdu4570Multi-bit Trie (间隙DP)
Problem Description IP lookup is one of the key functions of routers for packets forwarding and clas ...
- ASP.Net中上传文件的几种方法
在做Web项目时,上传文件是经常会碰到的需求.ASP.Net的WebForm开发模式中,封装了FileUpload控件,可以方便的进行文件上传操作.但有时,你可能不希望使用ASP.Net中的服务器控件 ...
- hadoop-mapreduce在maptask执行分析
MapTask执行通过执行.run方法: 1.生成TaskAttemptContextImpl实例,此实例中的Configuration就是job本身. 2.得到用户定义的Mapper实现类,也就是m ...
- 打印到类阵列的给定序列的所有排列的n皇后问题
题目例如以下:Given a collection of numbers, return all possible permutations. For example, [1,2,3] have th ...
- Android4.0（Phone）来电过程分析
在开机时.系统会启动PhoneApp类,那是由于在AndroidManifest.xml文件里配置了 <application android:name="PhoneApp" ...
- 字符串属性 NSMutableAttributedString/NSAttributedString
因为iOS7新出的NSTextStorge是NSMutableAttributedString的子类.所以要用好NSTextStorage.首先要学好NSMutableAttributedString ...