word-wrap,white-space和text-overflow属性
(1)
//在断点处换行
word-wrap: normal;
//允许在长单词进行换行
word-wrap: break-word;
(2)
white-space:怎么处理元素间的空白
white-space:nowrap 不换行
white-space:normal;默认。空白会被浏览器忽略。
white-space:pre-line;
保留空白,不换行
white-space:pre-wrap;
保留空白,换行
(3)text-overflow:ellipsis||clip||string
使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果
hover时候
text-overflow:inherit;
overflow:visible;
(4)多行文本溢出
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
word-wrap,white-space和text-overflow属性的更多相关文章
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- 【CSS学习】--- overflow属性
一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...
- 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变
字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...
- CSS display overflow 属性 cursor光标类型
display属性 功能:规则网页元素如何显示的问题. 取值:none(隐藏).block(以块元素显示).inline(以行内元素显示) block:可以实现将行内元素转成块元素. ...
- CSS中的overflow属性
导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...
- overflow属性
css属性overflow属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制. 参数是scroll时候,必会出现滚动条. 参数是auto时候,子 ...
- CSS overflow 属性
值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. ...
- 转:CSS Overflow 属性
原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...
- overflow属性及其在ios下卡顿问题解决
overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...
- CSS3对于盒中容纳不下的内容的显示——overflow属性
overflow属性 1.如果将overflow属性值设定为hidden,则超出容纳范围的文字将被隐藏起来. div{ overflow:hidden; } 2.如果将overflow属性值设定为sc ...
随机推荐
- "创业"半年
作为一个程序员, 因为受够了”给别人实现梦想太累”的念头, 又受到”外面给出更高薪水”的诱惑, 果断离职创业. 但原本是要创业的, 过了半年, 变成了失业, 这其中到底经历了哪 ...
- struts2之动态方法调用(转)
转自:http://blog.csdn.net/longwentao/article/details/6940289 当我们访问一个Action时,默认是访问execute()方法,但当在一个Acti ...
- Oracle EBS-SQL (WIP-1):检查非标任务没挂需求.sql
SELECT WE.WIP_ENTITY_NAME, MSI.SEGMENT1, MSI.DESCRIPTION, WDJ.CLASS_CODE, WDJ.START_QUANTITY, WDJ.SC ...
- collection set
http://blog.csdn.net/humingfiy/article/details/7946408 Collection:List.SetMap:HashMap.HashTable 如何在它 ...
- 移动网络山寨版(OpenBTS)【2】频段的故事
OpenBTS 系统有两个看点.一个是无线收发,尤其是频段的处理,另一个是网络系统,尤其是替代传统的基站(BTS),基站控制器(BSC),移动控制中心(MSC),以及(HLR/VLR)的另类方案. 先 ...
- pagespeed 安装(chrome版和firefox版)
原文地址:http://blog.sina.com.cn/s/blog_6c9da636010103va.html pagespeed 让你的网站页面打开速度飞起来! 1.firefox版本下的安装 ...
- OpenGL红宝书学习笔记(1)
OpenGL对场景中的图像进行渲染时所执行的主要操作: 1.根据几何图元创建形状,从而建立物体的数学描述,(OpenGL把点,直线,多边形和位图作为基本的图元) 2.在三维空间中排列物体,并选择观察复 ...
- Egret初体验–躲避类小游戏
下面简单介绍一下我这个游戏:基本上就3个画面(准备再添加一个胜利的界面)开始画面,一个按钮,点击进入游戏游戏画面,滚动的背景,触摸移动的老鹰,从天而降的翔,以及右上角的时间条结束画面,显示结果,关注按 ...
- IsNullOrEmpty和s == null || s.Length == 0哪个快
在写扩展方法时,看到有人用==null这个方法,说快,上网找了些资料,最后在csdn的博客上看到了一篇文章,说实测是后两者快,于是我也试着做了一个程序运行了一下,却发现这样的结果: 我测试了一个,发现 ...
- Angular基础知识
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 ng-directives 扩展了 HTML. ...