CSS溢出文本省略（text-overflow）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
dl{
width:240px;
border: solid 1px #ccc;
}
dt{
padding:8px 8px;
background: #7fecad;
font-size: 13px;
text-align: left;
font-weight: bold;
color: #71790c;
margin-bottom: 12px;
border-bottom: solid 1px #efefef;
}
dd{
font-size: 0.78em;
height: 1.5em;
width: 220px;
padding:2px 2px 2px 18px;
margin:2px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<dl>
<dt>体育新闻</dt>
<dd>亚运会在韩国港口城市仁川开幕，韩国总统朴槿惠出席</dd>
<dd>在亚运会首日，韩国军团占据奖牌榜第一位</dd>
<dd>亚运游泳观战指南:21日开始孙朴5场对决 中日大PK</dd>
<dd>亚运会在韩国港口城市仁川开幕，韩国总统朴槿惠出席</dd>
<dd>在亚运会首日，韩国军团占据奖牌榜第一位</dd>
<dd>亚运游泳观战指南:21日开始孙朴5场对决 中日大PK</dd>
</dl>
</body>
</html>
在CSS3中，text-overflow属性的基本语法如下：
- clip:表示不显示省略文本，简单的裁切。
- ellipsis:表示对象文本溢出时显示省略标记，省略标记插入的位置是最后一个字符。
- ellipsis-word：表示当对象文本溢出时显示省略标记，省略标记插入的位置是最后一个词（word）。
实际上，text-overflow属性仅用于决定当文本溢出时是否显示省略标记，并不具备样式定义的功能，要实现溢出时产生省略号的效果，应该在定义两个样式：强制文本在一行内显示（white-space:nowrap）和溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示为省略号效果。
CSS溢出文本省略（text-overflow）的更多相关文章
- CSS学习笔记：溢出文本省略（text-overflow）
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
- css 溢出文本显示省略号
这个标题其实已经是一个老生常谈的问题了.很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是 让超出宽度的部分文字用省略号(…)来表示.通常做法是网 ...
- css溢出文本显示省略号
css div { width: 200px; height: 200px; border: 1px solid; /* 以下四条缺一不可 其中 display:block 为隐藏条件 */ disp ...
- 黑科技：纯CSS定制文本省略
作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸 ...
- CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
http://www.52css.com/article.asp?id=602 =================================================== html ...
- css基础 -文本溢出 text-overflow:ellipsis;
.className{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} 外部结构如下是就失效了:(移动端) <a class ...
- html文本溢出显示省略字符的两种常用方法
方法一:使用CSS溢出省略的方式解决 解决效果如下: css代码: display: -webkit-box; display: -moz-box; white-space: pre-wrap; wo ...
- css单行文本与多行溢出文本的省略号问题
在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...
- 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题
上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
随机推荐
- CSS: Float a div on another div, Ex: Text caption on picture
<style type="text/css"> .figure { width: 316px; height: 205px; display: block; borde ...
- python(5) - 冒泡排序
data = [10, 4, 33, 21, 54, 3, 8, 11, 5, 22, 2, 1, 17, 13] ''' 思路:有多少个元素就循环多少次,每次循环从第一个元素开始与它后面的元素比较, ...
- wpf 父控件透明子控件不透明
在wpf开发中遇到子控件会继承父类控件属性的问题, 例如: <StackPanel Orientation="Horizontal" Grid.Row="1&quo ...
- pgpool postgresql集群、中间件
pgpool-II是一个工作于PostgreSQL服务器端和PostgreSQL客户端之间的中间件,它提供了如下的功能: 1.连接池 pgpool-II中保存了到PostgreSQL服务器的连接,然后 ...
- Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片
Adobe Edge Animate –解决图形边缘精确检测问题-通过jquery加载svg图片 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在edge ...
- template和templateUrl区别与联系
templateUrl其实根template功能是一样的,只不过templateUrl加载一个html文件,template后面根的是html的标签. .state('menu.about', { u ...
- poj 2724 二分图最大匹配
题意: 会给出M个串,我们要做的就是将这M个串给清除了.对于任意两个串,若二进制形式只有一位不一样,那么这两个串可以在一次操作消除,否则每个操作只能消除一个串. 3 3 *01 100 011 可以代 ...
- 【转】Github入门教程
原文 http://www.eoeandroid.com/thread-274556-1-1.html [初识Github] 首先让我们大家一起喊一句“Hello Github”.YEAH!就是这样. ...
- sql防注入式
SQL注入式攻击是利用是指利用设计上的漏洞,在目标服务器上运行Sql命令以及进行其他方式的攻击动态生成Sql命令时没有对用户输入的数据进行验证是Sql注入攻击得逞的主要原因.比如: 如果你的查询语句是 ...
- Linux系统下给VMWare安装Tools
1.进入Linux系统. 2.在VMware的窗口菜单中选VM >> install VMware Tools,虚拟机自动将VMware-tools装入虚拟光驱中. 3.在虚拟光驱里找出V ...