超出区域文字显示为省略号或者剪切效果——CSS的生僻操作
每门语言总有那么一些不太常用,却又不可或缺的语法操作。下面说一下,在HTML文件中,如何设置用 “省略号” 和 “剪切” 代替大量文字的效果。
以下是HTML的主体代码:
首先,中文是默认行末自动换行的。而英文和数字,主流浏览器一般默认为空格处换行。上图,我们先编写2段字符。然后CSS代码见下图:
见上图,设置div的大小使其装不下字符,然后对字符设置不断行。这样文字会超出div显示,然后overflow:hidden;让超出部分隐藏不显示,
然后 text-overflow:ellipsis;或者 text-overflow:clip;分别设置隐藏部分用 省略号或剪切效果显示。
超出区域文字显示为省略号或者剪切效果——CSS的生僻操作的更多相关文章
- css把超出的部分显示为省略号的方法兼容火狐
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- css怎样让HTML中超出的内容显示为省略号
文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法第一种.用程序开截取字符长度,这个其实也是可以的.第二种就是接下来分享的内容,用css样式来做,话也 ...
- CSS小技巧-怎样让每行多余的文字显示文省略号?
1.white-space:nowrap 如果是中文,则需要设置行末不断行 2.overflow:hidden 设置超出控件范围隐藏 3.text-overflow:ellipsis
- CSS控制文字显示一行,超出显示省略号
这几天在项目需求里面遇到了很多之前没做过的需求,也慢慢更加认识到了css的强大,是真的强大.以后会把自己技术调研的东西都写出来,哪怕只是一点点或者很小的点,重在学习. “CSS控制文字显示一行,超出显 ...
- css限制文字显示字数长度,超出部分自动用省略号显示,防止溢出到第二行
为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...
- js实现多行文本超出一定字数显示省略号功能
最近项目中遇到了一个关于超出一定字数用省略号显示的问题,其实这种形式很常见,公司简介.产品介绍啊里面都可能会用到,一行文字显示省略号很容易,多行就得想点办法了.在经过查阅.整理之后,我也算是实现了这个 ...
- td默认文字超出后显示..,点击tr时td文字显示完整
做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...
- 微信小程序之canvas 文字断行和省略号显示
文字的多行处理在dom元素中很好办.但是canvas中没有提供方法,只有通过截取指定字符串来达到目的. 那么下面就介绍我自己处理的办法: wxml: <canvas canvas-id='wor ...
- Android 文字过长TextView如何自动截断并显示成省略号
当用TextView来显示标题的时候,如果标题内容过长的话,我们不希望其换行显示,这时候我们需要其自动截断,超过的部分显示成省略号. 如下图所示,标题过长,自动换行了,显示不是很好看. 这时候我们需要 ...
随机推荐
- css3 翻牌效果
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- IOS 消息
发送消息: NSDictionary *dict=[[NSDictionary alloc]initWithObjectsAndKeys:@"num",[NSString stri ...
- Java中间件:淘宝网系统高性能利器(转)
淘宝网是亚太最大的网络零售商圈,其知名度毋庸置疑,吸引着越来越多的消费者从街头移步这里,成为其忠实粉丝.如此多的用户和交易量,也意味着海量的信息处理,其背后的IT架构的稳定性.可靠性也显得尤为重要.那 ...
- Java语言Socket接口用法详解
Socket接口用法详解 在Java中,基于TCP协议实现网络通信的类有两个,在客户端的Socket类和在服务器端的ServerSocket类,ServerSocket类的功能是建立一个Serve ...
- Delphi遍历文件夹及子文件夹(可查找固定格式文件)
Delphi遍历文件夹及子文件夹 {-------------------------------------------------------------------------------过程名 ...
- DDOS攻击(流量攻击)防御步骤
DDOS全名是Distributed Denial of service (分布式拒绝服务攻击),很多DOS攻击源一起攻击某台服务器就组成了DDOS攻击,DDOS 最早可追溯到1996年最初,在中国2 ...
- js原生设计模式——3简单工厂模式\简单工厂模式封装简单对象
1.Factory基本写法 <!DOCTYPE html><html lang="en"><head> <meta charset= ...
- MySQL in不走索引
优化前 SELECT* FROM erp_helei mg WHERE mg.num = 602 AND mg.pid IN (10002559,10002561,10002562,10 ...
- mysql 使用sqldump来进行数据库还原
MYSQLdump参数详解 mysqldump备份: 复制代码代码如下: mysqldump -u用户名 -p密码 -h主机 数据库 a -w “sql条件” –lock-all-tables > ...
- document.body.clientHeight的取值
http://www.cnblogs.com/fullhouse/archive/2012/01/05/2313800.html 有时候需要取页面的底部, 就会用到document.body.clie ...