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 ...
随机推荐
- ffmpeg在Win7 VS2010中debug通过,release出错的问题解决方法
我所用的系统环境是Win7 32位操作系统+VS2010编译环境.所以在debug模式下调通之后,在Release模式下调试不通过,最后通过上网查资料和自己对比两个编译选项得出以下结论: 修改“项目- ...
- Gentoo Linux 学习笔记1
Gentoo Linux是一个基于portage进行包管理的Linux发行版,最早版本始于2002年.其官方官网为http://www.gentoo.org 目前,Gentoo Linux已 ...
- 启用 ASP.NET MVC 项目的 Edit and Continue
VS 的 Edit and Continue 功能允许你在 Debug 的过程中,修改代码并且编译运行修改后的代码.对于编程阶段非常的好用,不需要你停止正在进行的 Debug,修改代码然后运行代码. ...
- SQL顺序列找出断号
select id from info id-----------123567810111215 (11 行受影响) 方法一: select (select max(id)+1 from Info w ...
- PHP自定义函数与字符串处理
自定义函数: 1.默认值的函数: function Main($a=5,$b=6) { echo $a*$b; } 2.可变参数的函数: function ...
- dog-fooding-our-api-authentication
Dog-fooding our API - Authentication http://blog.mirajavora.com/authenticate-web-api-using-access-to ...
- windows编程之菜单操作
分清几个概念 <1>"主菜单" 和 "顶层菜单" 是一个意思. <2>主菜单中的项目叫做 "弹出菜单" 或者 &qu ...
- httpclient response 重定向
HTTPClient请求后,重定向后,获取重定向的URL. 方法一:重定向后获取URL import org.apache.http.HttpEntity; import org.apache.htt ...
- .net通用权限框架B/S (三)--MODEL层(2)
接上篇 实体数据模型保存后生成上下文和实体 上下文和实体实际是由根据.tt模版生成的 当实体数据模型.edmx更新保存后,上下文和实体就会根据.tt模版自动更新 生成的上下文继承 DbContext ...
- QRMaker生成二维码,支持中文
QRMaker如果想支持中文,可以将中文转为UTF8,然后用InputDateB直接传入Byte() Option Explicit Private Declare Function WideChar ...