<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后,隐藏文字并显示...的更多相关文章

  1. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  2. 微信小程序文字超过行后隐藏并且显示省略号

    在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...

  3. 文字超出DIV的边框

    已经给div设置了高宽,但是文字还是会戳出div而不是换行 鼓捣了一下好像是因为这个原因 如果全是 aaaaaaaaaaaaaaaaaaaaa 这样的纯英文,那么测试的时候是不会换行的,因为浏览器认为 ...

  4. div中包着文字，div出现隐藏的时候，文字总是在div外面。

    背景: 给博客加一个侧边栏,点击出现隐藏,每次点击出现或者隐藏,文字总是很突兀的就出来了. 解决: overflow:hidden

  5. QTextEdit/QPlainTextEdit添加文字超出视图后，滚动条自动移至最底部

    void ThreadExit::onTaskPerformState(const QString& strStatus) { //追加文本(ui.taskStatusTextEdit是一个Q ...

  6. 段落超出div部分隐藏显示

    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

  7. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中（文字高度超过图片，图片跟随文字居中，反之文字跟随图片居中非table实现）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 设置表格td超出内容后截取并以...显示

    .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <table style=" ...

  9. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

随机推荐

  1. MongoDB CRUD 基础知识

    建立一个良好的发展环境 环境win8 x64,下载并安装省略.经mongodb 的bin文件夹增加windows的path中,为以后使用方便. c盘新建存储目录:c:/data/db 执行服务:WIN ...

  2. MSMQ学习笔记

    这几天学习了一下MSMQ,虽然不能说非常深入的了解其机制与实际用法(具体项目的实现),但也要给自己的学习做个总结.学习心得如下: 一.MSMQ即微软消息队列.用于程序之间的异步消息通信,主要的机制就是 ...

  3. 第十二章——SQLServer统计信息（2）——非索引键上统计信息的影响

    原文:第十二章--SQLServer统计信息(2)--非索引键上统计信息的影响 前言: 索引对性能方面总是扮演着一个重要的角色,实际上,查询优化器首先检查谓词上的统计信息,然后才决定用什么索引.一般情 ...

  4. LVM pvcreate,vgcreate,lvcreate,mkfs

    首先介绍LVM的几个概念:     1. 物理卷Physical volume (PV):可以在上面建立卷组的媒介,可以是硬盘分区,也可以是硬盘本身或者回环文件(loopback file).物理卷包 ...

  5. 从源代码分析modelDriven拦截器和params拦截器和拦截器prepare 和paramsPrepareParamsStack拦截器栈（让你的Struts2代码更简洁——如何培养框架设计能力

    源代码文件:Web App Libraries/struts2-core-2.3.15.3.jar/struts-default.xml 拦截器modelDriven: <interceptor ...

  6. QTbutton设置背景颜色和文字显示位置设置

    QPushButton * pQBtn = new QPushButton( cBuff, this ); pQBtn->setStyleSheet("text-align: left ...

  7. CoffeeScript NgComponent

    Angular遇上CoffeeScript - NgComponent封装 CoffeeScript是基于JavaScript的一门扩展小巧语言,它需要编译成JavaScript,然后再运行与浏览器或 ...

  8. IT只忍者龟Photoshop简单人像的头发抠图过程

    一.导入素材,加入蒙版 1.导入美女图片 2.导入背景图片 如今须要将美女抠出来放在这个背景上,怎么办?一定会有人想到用通道,抽出.(备注:在ps6以后版本号,抽出已经没有这个选项了). 3.将美女图 ...

  9. JSF+EJB+JPA总体思路

    前言: JSF+EJB+JPA 其实我并没有想象中的难,只是想做好,建立在正确的地方应用,真正的困难. 良好的技术,在错误的地方做应用,这是唯一能够被垃圾. 用. 重量级企业应用能够使用这个主要的3层 ...

  10. ES6 扫盲

    原文地址:ECMAScript 6 扫盲--小胡子 1. let.const 和 block 作用域 let 允许创建块级作用域,ES6 推荐在函数中使用 let 定义变量,而非 var: var a ...