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 ...
随机推荐
- IO-04. 混合类型数据格式化输入
/** *A4-IO-04. 混合类型数据格式化输入 *C语言实现 *测试已通过 */ #include "stdio.h" int main() { float m1,m2; i ...
- 鼠标拖放div 实现
Javascript的mousemove事件类型是一个实时响应的事件,当鼠标指针的位置发生变化时(至少移动1个像素),就会触发mousemove事件.该事件响应的灵敏度主要参考鼠标指针移动速度的快慢, ...
- 很详细、很移动的Linux makefile教程:介绍,总述,书写规则,书写命令,使用变量,使用条件推断,使用函数,Make 的运行,隐含规则 使用make更新函数库文件 后序
很详细.很移动的Linux makefile 教程 内容如下: Makefile 介绍 Makefile 总述 书写规则 书写命令 使用变量 使用条件推断 使用函数 make 的运行 隐含规则 使用m ...
- POJ 3481 Double Queue STLmap和set新学到的一点用法
2013-08-08 POJ 3481 Double Queue 这个题应该是STL里较简单的吧,用平衡二叉树也可以做,但是自己掌握不够- -,开始想用两个优先队列,一个从大到小,一个从小到大,可是 ...
- [Leetcode][Python]19: Remove Nth Node From End of List
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 38: Count and Sayhttps://oj.leetcode.co ...
- 404 Not Found The requested URL * was not found on this server
1. 把从SVNcheckout下来的代码搭建起来.CakePHP+mysql.改动数据库配置. 2. 配置虚拟主机,发现訪问不了/user/login这个URL,报这个错误:404 Not Foun ...
- 高效搭建Spark全然分布式集群
写在前面一: 本文具体总结Spark分布式集群的安装步骤,帮助想要学习Spark的技术爱好者高速搭建Spark的学习研究环境. 写在前面二: 使用软件说明 约定,Spark相关软件存放文件夹:/usr ...
- update慢怎样处理?
update慢: 1.表的pctfree參数设置? 2.运行计划用索引还是全表扫? 3.SQL语句写法问题? 4.update慢还是commit慢? 5.更新多少条数据? 6.表是否频繁update造 ...
- 新手求大神,有其他swit-case的思路写这个程序么?
两个程序: switch-case与if-else if的区别相同点:可以实现多分支结构;不同点:switch:一般只能用于等值比较.(可以进行范围运算???---学会用switch计算范围出炉的思路 ...
- EC读书笔记系列之12:条款22、23、24
条款22 将成员变量声明为private 记住: ★切记将成员变量声明为private.这可赋予客户访问数据的一致性.可细微划分访问控制.允诺约束条件获得保证,并提供class作者以充分的实现弹性. ...