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样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...
随机推荐
- [PHP] Eclipse开发PHP环境配置
首先准备好软件: 1. Apache,到这里找个最新版本 2. PHP,到这里下载 3. Eclipse IDE for Java EE Developers,到这里下载 4. DLTK Core F ...
- 杂乱无章之javascript（一）
1.in 要求第一个(左边的)操作数必须是字符串类型或是可以转化成字符串类型的其他类型,而第二(右边的)操作数必须是数组或对象.只有第一个操作数的值是第二个操作数的属性名,才会返回true,否则返回f ...
- css笔记07：通配符选择器
通配符选择器: * { margin:10px ;//默认四个位置参数全为零 margin-top:10px;//分别设置四个参数 margin-left:10px; margin-right:0px ...
- Android（java）学习笔记91：泛型接口的概述和使用
package cn.itcast_06; /* * 泛型接口:把泛型定义在接口上 */ public interface Inter<T> { public abstract void ...
- session超时和cookie过期
一.Cookie的过期和Session的超时有什么区别? 会话的超时由服务器来维护,它不同于Cookie的失效日期.首先,会话一般基于驻留内存的cookie不是持续性的cookie,因而也就没有截至日 ...
- CF Playing with Paper
Playing with Paper time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- [改善Java代码]用枚举实现工厂方法模式更简洁
工厂方法模式(Factory Method Patter)是"创建对象的接口",让子类决定实例化哪一个类,并使一个类的实例化延迟到其子类.工厂方法模式在我们的开发工作中,经常会用到 ...
- [改善Java代码]线程优先级只使用三个等级
线程的优先级(priority)决定了线程获得CPU运行的机会,优先级越高获得的运行机会越大,优先级越低获得的机会越小.Java的线程有10个级别(准确的说是11个级别,级别为0的线程是JVM,应用程 ...
- 24小时学通Linux内核之如何处理输入输出操作
真的是悲喜交加呀,本来这个寒假早上8点都去练车,两个小时之后再来实验室陪伴Linux内核,但是今天教练说没名额考试了,好纠结,不过想想就可以睡懒觉了,哈哈,自从大三寒假以来还没睡过懒觉呢,现在也有更多 ...
- 为什么Java byte 类型的取值范围是-128～127 (转)
概念:负数的补码是该 数 绝 对 值 的 原 码 按 位 取 反 ,然 后 对 整个数 加 1 步骤: 1.确定byte是1个字节,也就是8位 2.最大的应该是0111 1111,因为第一位是符号位, ...