text-overflow(clip | elipsis)（显示省略号| 不显示省略号）

white-space:nowrap    强制文字不断行

word-break:break-all;     和       word-break:break-word;

word-break:break-all;不仅把超出的文字断行还会整齐的排列

word-wrap:break-word;   把超出的文字强制断行，其余的不管，

eg:<p>jflllllllllllllllllllfdjvorfijcdksjhvcidjvcij6789009376567899396767462769hauhfuidhjhfeirhfnjunvreahfvbhjvbujhu</p>

.p1{ width:200px; border:1px solid #000; font:14px/24px Arial; word-wrap:break-word;/*word-break:break-all;*/}

省略号：

<p class="p2">房间爱家的富婆俄日法搜顶顶顶顶顶顶顶顶顶顶的巨款HREI发的时刻就分开上档次， 发动机覅开发可可哦靠都快沉客服来得快。</p>

.p2{ width:200px; border:1px solid #000; font:14px/24px Arial;

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

盒模型的怪异模式：

box-sizing盒模型解析

content-box 标准盒模型   border-box  怪异模式

width/height=border+padding+content

Border-box 怪异盒模型   width/height=content

可视宽： 元素的内容宽+padding+border

元素的内容宽：元素里可以方内容的宽

怪异模式：可视宽 设置宽度  内容宽  设置宽度-padding-border

在IE6,7,8下不设置文档声明的时候，页面的盒模型解析 就会进入怪异模式

隐藏方式：

1.display：none;

2.visibility:hidden;

eg：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{ width:100px; height:100px; background:red; border:5px solid #333;}
.box1{ display:none;}    //隐藏后不保留原来位置，后者补上
.box2{ visibility:hidden;}   //隐藏后保留原来位置，
</style>
</head>

<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>

fixed不兼容问题：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 1.

<style type="text/css">

html{ height:100%; overflow:hidden;}
body{ margin:0; height:100%; overflow:auto;}
.box{ height:2000px;}
.div{ width:100px; height:100px; background:red; position:absolute; left:100px; top:100px;}
</style>

2.

<style type="text/css">

.box{ height:2000px;}
.div{ width:100px; height:100px; background:red; position:fixed; left:100px; top:100px;

_position:absolute;_top:expression(eval(document.documentElement.scrollTop+));//不建议用，建议用js写

}
</style>

</head>

<body>
<div class="box">
<div class="div"></div>

</div>
</body>
</html>

css 断行省略号，隐藏，fixed定位的更多相关文章

  1. 安卓弹出键盘隐藏fixed定位相关的元素(obj必须是class)

    //安卓弹出键盘隐藏fixed定位相关的元素(obj必须是class) function displayFixed(obj){ var h = document.body.scrollHeight; ...

  2. css 多行省略号兼容移动端

    浏览器兼容css样式 -webkit-line-clamp: ; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; te ...

  3. fixed 定位 苹果手机输入框触发时内容全部隐藏

    问题出现在东钿微信公众号用户注册页面 页面中只有两个输入框 页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了, ...

  4. CSS fixed 定位元素失效的问题

    一个示例 考察下面的代码: <head> <title>css filter issue</title> <style> body { height: ...

  5. CSS系列：CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

  6. fixed定位兼容性

    不过从ios5.1以来,fixed定位就已经支持了,但很遗憾,ios现在对它还只是半支持. 但是在某些情况下,会出现一些比较奇葩的问题,比如fixed元素中存在输入框子元素,这个时候就会跪了. 可以看 ...

  7. 内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

    今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素displ ...

  8. [jQuery]相对父级元素的fixed定位

    (function($) {     var DNG = {};     //----------------------------------------------------/     // ...

  9. 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

    HTML: <div class="top"> ·····内容 </div> <div class="scroll">< ...

随机推荐

  1. CF702E Analysis of Pathes in Functional Graph

    倍增练习题. 基环树上倍增一下维护维护最小值和权值和,注意循环的时候$j$这维作为状态要放在外层循环,平时在树上做的时候一个一个结点处理并不会错,因为之前访问的结点已经全部处理过了. 时间复杂度$O( ...

  2. 3.3PCL已有点类型介绍和增加自定义的点类型

    1.PCL中有哪些可用的PointT类型 这些point类型都位于point_types.hpp文件中,如果用户需要自己定义类型,需要对已有类型了解. 1)PointXYZ---成员变量:float ...

  3. Ubuntu相关IP配置（转）

    配置文件:/etc/network/interfaces 打开后里面可设置DHCP或手动设置静态ip.前面auto eth0,让网卡开机自动挂载. 1. 以DHCP方式配置网卡 编辑文件/etc/ne ...

  4. Entity Relationships

    Entity Relationships: Here, you will learn how entity framework manages the relationships between en ...

  5. Java Calendar 类的时间操作.RP

    JavaCalendar 类时间操作,这也许是创建和管理日历最简单的一个方案,示范代码很简单. 演示了获取时间,日期时间的累加和累减,以及比较. 原文地址:blog.csdn.NET/joyous/a ...

  6. SDUT 3343 数据结构实验之二叉树四：还原二叉树

    数据结构实验之二叉树四:还原二叉树 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 给定一棵 ...

  7. 处理器(也就是执行流程图上面的controller)执行逻辑（十）

    处理器继承自:AbstractController,MultiActionController   一.AbstractController 如上图,可以分析出AbstractController用的 ...

  8. C#中virtual和abstract区别，举例子

    virtual和abstract都是用来修饰父类的,通过覆盖父类的定义,让子类重新定义. 它们有一个共同点:如果用来修饰方法,前面必须添加public,要不然就会出现编译错误:虚拟方法或抽象方法是不能 ...

  9. 接口型模式（二）Bridge（桥接）模式

    目的: 将抽象与抽象方法的实现相分离,使得它们可以独自变化.常用于驱动程序中,使得顶层逻辑不受驱动底层改变的影响,如数据库的变化. 关键词:Bridge, 抽象与实现分离,驱动程序 必要性:从一般抽象 ...

  10. HTTP 协议 -- 浏览器缓存机制

    浏览器缓存机制 浏览器缓存机制主要是 HTTP 协议定义的缓存机制. HTTP 协议中有关缓存的缓存信息头的关键字有 Cache-Control,Pragma,Expires,Last-Modifie ...