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. 15-struct(构造函数，重载)

    必须充分掌握struct的使用,包括其构造和重载函数的写法: #include <iostream> using namespace std; struct node { int x, y ...

  2. 华为2013年西安java机试题目：如何过滤掉数组中的非法字符。

    这道题目为记忆版本: 题目2描述: 编写一个算法,过滤掉数组中的非法字符,最终只剩下正式字符. 示例:输入数组:“!￥@&HuaWei*&%123” 调用函数后的输出结果,数组:“Hu ...

  3. iOS Simulator hang up ( Xcode4.6.3)

    最近遇见个Xcode的bug,搞的十分郁闷. 具体现象是:程序前段时间都是好好的,可以运行,第二天开机,调试就无法进入模拟器.就连main()函数都进不了.模拟器完全挂起了.具体说来就是代码一句都没改 ...

  4. 浅谈android代码保护技术_ 加固

    浅谈android代码保护技术_加固 导语 我们知道Android中的反编译工作越来越让人操作熟练,我们辛苦的开发出一个apk,结果被人反编译了,那心情真心不舒服.虽然我们混淆,做到native层,但 ...

  5. php获取数据库结果集

    PHP经常要访问数据库提前数据库里面的数据,那么该怎么样去提前数据呢? 提取数据库代码如下: <?phpinclude("conn.php");//数据库连接 $sql=&q ...

  6. 笔录---果壳中的C#第一章

    ---恢复内容开始--- 笔录---果壳中的C#第二章 2.1 第一个C#程序 1.C#语句按顺序执行,以“:”结尾. Console.WriteLine();     console 为类,Writ ...

  7. JVM各区域的用途

    程序计数器 用于给字节码解释器来选取吓一跳需要执行的字节码指令.每个线程有一个独立的程序计数器去,且各个线程之间互不影响.如果线程正在执行一个Java方法,这个计数器记录的是正在执行的虚拟机字节码指令 ...

  8. 如何理解虚拟React的DOM（转）

    目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异 ...

  9. Django之博客系统：用户注册和Profile

    前面章节介绍了用户的登录,退出.这一章将介绍用户的注册.首先需要创建一个表单来让用户填写用户名,密码等信息.创建UserRegistrationFrom表单.并指定model为User类 from d ...

  10. Unity自带IAP插件使用（googleplay）

    https://blog.csdn.net/ar__ha/article/details/64439872 Unity Services里的Unity IAP对于IOS和GooglePlay的支付用这 ...