(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属性的更多相关文章

  1. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  2. 【CSS学习】--- overflow属性

    一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...

  3. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  4. CSS display overflow 属性 cursor光标类型

    display属性   功能:规则网页元素如何显示的问题.   取值:none(隐藏).block(以块元素显示).inline(以行内元素显示)   block:可以实现将行内元素转成块元素.   ...

  5. CSS中的overflow属性

    导读:overflow属性一般用来隐藏超过div范围的元素,包括不隐藏(visible),直接隐藏(hidden),用滚动条隐藏(scroll),自动(aotu)这四个属性.当然overflow的用法 ...

  6. overflow属性

    css属性overflow属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制. 参数是scroll时候,必会出现滚动条. 参数是auto时候,子 ...

  7. CSS overflow 属性

     值 描述 visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. ...

  8. 转:CSS Overflow 属性

    原文:CSS Overflow 属性译自:The CSS Overflow Property版权所有,转载请注明出处,多谢!! 根据CSS的盒模型概念,页面中的每个元素,都是一个矩形的盒子.这些盒子的 ...

  9. overflow属性及其在ios下卡顿问题解决

    overflow属性:http://www.w3school.com.cn/cssref/pr_pos_overflow.asp overflow:scroll/auto;在手机页面滑动不流畅问题: ...

  10. CSS3对于盒中容纳不下的内容的显示——overflow属性

    overflow属性 1.如果将overflow属性值设定为hidden,则超出容纳范围的文字将被隐藏起来. div{ overflow:hidden; } 2.如果将overflow属性值设定为sc ...

随机推荐

  1. js cookie读取

    /**存放Cookies: 两个参数,一个是cookie的名子,一个是值*/ function SetCookie(name,value){ var Days = 30; //此 cookie 将被保 ...

  2. Jdt Javax

    http://www.javablogging.com/dynamic-in-memory-compilation/ http://www.java2s.com/Code/Java/JDK-6/Com ...

  3. struct和class 区别

    struct和class区别与联系 关于使用大括号初始化class和struct如果定义了构造函数的话,都不能用大括号进行初始化如果没有定义构造函数,struct可以用大括号初始化.如果没有定义构造函 ...

  4. C4.5较ID3的改进

    1.ID3选择最大化Information Gain的属性进行划分   C4.5选择最大化Gain Ratio的属性进行划分 规避问题:ID3偏好将数据分为很多份的属性 解决:将划分后数据集的个数考虑 ...

  5. Android系统移植与调试之------->如何修改Android设备的开机第二阶段Logo

    1.修改位置:/home/pyou/mx0831-0525/device/other/TBG1073目录 2.将robot.1024x600.png替换为自己想设置的图片命名必须一致,目录下还有其他不 ...

  6. POJ3253 Fence Repair(贪心)

    分割木板的顺序是自由的,所以每次选择两块最短的板,组合在一起,增加队列,原来两个板出队,直到队列中为空或者仅仅剩下一个板时结束.这里使用优先队列较为方便. #include<iostream&g ...

  7. ASP.NET MVC 学习之路-4

    本文在于巩固基础 模型绑定 从URL 获取值 public ActionResult About(int id) { ViewBag.Id = id; return View(); } @{ View ...

  8. JavaScript 的DOM操作

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. Windows 对象操作 ...

  9. 查询最小未使用ID的SQL查询

    --每个都加一,以此来找出最小的未用ID SELECT Min(T1.ID)+1 FROM dbo.TestTable T1 -- 不用查询已经存在的ID WHERE (T1.ID+1) NOT IN ...

  10. vs2010快捷方式

    [窗口快捷键] Ctrl+W,W: 浏览器窗口  Ctrl+W,S: 解决方案管理器  Ctrl+W,C: 类视图  Ctrl+W,E: 错误列表  Ctrl+W,O: 输出视图  trl+W,P: ...