文字超出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 ...
随机推荐
- 股票作手回忆录Digest(转)
记住,驱动股市的不是理智.逻辑或纯经济因素,驱动股市的是从来不会改变的人的本性.它不会改变,因为它是我们的本性.[4] 在华尔街或在股票投机中,没有什么新的东西.过去发生的事情在将来会一而再,再而三地 ...
- Visual Studio 2015使用EF6的DBFirst模式操作Sqlite数据库
什么是DBFirst 1:到官方下载并安装32位驱动(如果你是旧版的驱动,卸载掉,然后下载最新版的,否则操作数据时会出现异常) 2:通过Nuget获取System.Data.SQLite(会默认把下面 ...
- secureCRT使用退格键（backspace）出现^H解决的方法
刚新装了python-3.4.1,使用secureCRT连接上去,可是我在进入后,输入回格键时,屏幕显示的是^H,这个让人受不了.最终在网上找到了解决的方法,仅仅要改动一下secureCRT的配置就可 ...
- 项目构建之maven篇:3.m2eclipse使用
m2eclipse的安装 略 设置maven文件夹 设置用户个性化的maven配置 导入mavenproject 源码下载 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...
- Codeforces Round #257 (Div. 1)449A - Jzzhu and Chocolate(贪婪、数学)
主题链接:http://codeforces.com/problemset/problem/449/A ------------------------------------------------ ...
- 博客搬到了http://xianglong.me
自己用Django建立个人博客.这个博客的部分已经迁移到新的个人博客. 博客地址:龙 (http://xianglong.me),欢迎. 版权声明:本文博客原创文章,博客,未经同意,不得转载.
- .NET反编译之Reflector
.NET反编译之Reflector 这几日由于公司需要, 看了些.NET反编译技巧,特地和大家分享下 .NET反编译工具很多,Reflector是其中一个很优秀的工具,所以就用它来进行反编译工作了.今 ...
- spring mvc 控制器方法传递一些经验对象的数组
由于该项目必须提交一个表单,其中多个对象,更好的方法是直接通过在控制器方法参数的数组. 因为Spring mvc框架在反射生成控制方法的參数对象的时候会调用这个类的getDeclaredConstru ...
- PowerDesigner教程
PowerDesigner是一款功能很强大的建模工具软件,足以与Rose比肩,相同是当今最著名的建模软件之中的一个.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesi ...
- TCP/UDP简易通信
TCP/UDP简易通信框架源码,支持轻松管理多个TCP服务端(客户端).UDP客户端 目录 说明 TCP/UDP通信主要结构 管理多个Socket的解决方案 框架中TCP部分的使用 框架中UDP部分的 ...