文字超出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 ...
随机推荐
- 在SQL Server Management Studio中可以运行作业但是用T-SQL运行则失败
原文:在SQL Server Management Studio中可以运行作业但是用T-SQL运行则失败 问题: 在SQL Server Management Studio中可以运行作业但是用T-SQ ...
- 实现BUG自动检测 - ASP.NET Core依赖注入
我个人比较懒,能自动做的事绝不手动做,最近在用ASP.NET Core写一个项目,过程中会积累一些方便的工具类或框架,分享出来欢迎大家点评. 如果以后有时间的话,我打算写一个系列的[实现BUG自动检测 ...
- WPF学习（4）逻辑树和可视树
前面几节说了一些WPF的基础,包括XAML和布局等.在接下来的几节,我们来说说WPF的核心概念,包括逻辑树和可视树.依赖对象和依赖属性.路由事件.命令这几个部分.本节介绍下逻辑树(Logical Tr ...
- 提高duilib的richedit控制的一些特征
转载请注明原始出处.谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41208207 假设要使用透明异形窗口功能,首先要改进duilib库让他 ...
- Play Framework + ReactiveMongo
Play Framework + ReactiveMongo Play!是一个full-stack(全栈的)Java/Scala Web应用框架,包括一个简单的无状态MVC模型,具有Hibernate ...
- CentOS7 安装Hadoop集群环境
先按照上一篇安装与配置好CentOS以及zookeeper http://www.cnblogs.com/dopeter/p/4609276.html 本章介绍在CentOS搭建Hadoop集群环境 ...
- php形式的内容被处理
/** * 过滤HTML内容RETURN * * @param $string * @param bool $html * * @return array|string */ public stati ...
- oracle10g获得Date类型字段无分，秒的解决方案！
一般的数据库中,DATE字段只表示日期,不包含日期信息,而Oracle数据库中的DATE数据类型是包含日期.时间的,对于不同的Oracle jdbc驱动版本号.对于该问题的处理都有些差别. 近期使用 ...
- hdu 1233(还是畅通project)（prime算法，克鲁斯卡尔算法）（并查集，最小生成树）
还是畅通project Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- JavaScript的类型、值和变量的总结
前言:JavaScript的数据类型分为两类:原始类型和对象类型.5种原始类型:数字.字符串.布尔值.null(空).undefined(未定义).对象是属性的集合,每个属性都由“名/值对”(值可以是 ...