文档章节

css中text-overflow:ellipsis文本溢出产生省略号

Reya滴水心
 Reya滴水心
发布于 2015/08/12 10:29
字数 160
阅读 77
收藏 4

text-overflow : clip | ellipsis
参数:
  clip :  不显示省略标记(...),而是简单的裁切 (PS:clip这个参数是不常用的!)
  ellipsis :  当对象内文本溢出时显示省略标记(...)


text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。

想要实现溢出文本时产生省略号的效果:

必须定义:1、强制文本在一行内显示(white-space:nowrap);

                2、溢出内容为隐藏(overflow:hidden);

                3、溢出时显示省略号(text-overflow:ellipsis).

© 著作权归作者所有

Reya滴水心
粉丝 40
博文 88
码字总数 34619
作品 0
深圳
前端工程师
私信 提问
CSS控制文字只显示一行,超出部分显示省略号

之前使用过这个例子,现在总结说明一下: 先给贴代码: <p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> </p> 测试浏览器: IE6/7/8/9、opera12.0......

曾沙
2012/10/29
8.1K
0
css3文本溢出显示控制

1.单行文本溢出显示省略号(…) 设置元素为块级元素display:block,设置元素宽度width,设置overflow:hidden,设置文本溢出显示状态text-overflow:ellipsis; white-space是否在容器边界换行,n...

w-rain
2016/01/08
266
0
《CSS实现单行、多行文本溢出显示省略号》

本文转载于:猿2048网站➵《CSS实现单行、多行文本溢出显示省略号》 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏...

前端老手
09/07
16
0
CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。 实现方法: overflow: hidden;text-overflow:ellipsis;white-...

ForingY
2015/10/28
1K
0
CSS 多行文本换行,溢出部分省略号

//但行文本省略号 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //多行文本省略号 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line......

Jack088
2015/10/19
524
0

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
5
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部