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. linux所有文件中查找关键字的命令

     grep 192.168.1.1 * -r    在所有文件中查找192.168.1.1

  2. 855C Helga Hufflepuff's Cup

    传送门 题目大意 给你一棵树,可以染m种颜色,现定义一种特殊的颜色K,一棵树上最多能有x个特殊颜色.如果一个节点为特殊颜色,那么他相邻的节点的值只能选比K小的颜色,问一共有多少种染色方案. 分析 不难 ...

  3. Tomact和XML配置文件

    1 Http协议2 Tomcat服务器3 编写xml4 通过DTD约束编写指定格式的XML 5 通过Schema约束编写指定格式的XML6 使用D0M4J解析xml================== ...

  4. MySQL导出导入命令的用例

    1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u wcnc -p smgp_apps_wcnc > wcnc.sql 2.导 ...

  5. Ubuntu学习小结(二)PostgreSQL的使用,进程的查看关闭,编辑器之神Vim入门

    距离上次发布文章已经过去了很久.在过去的半年中,虽然写的代码不多,但是在接触了计算机一些其他的知识,包括数据库.网络之后,感觉能够融会贯通,写代码水平又有了一定的提高.接下来,将会发表几篇文章,简单介 ...

  6. 【Arcgis for android】相关教程收集自网络

    请加入qq群:143501213 一起交流和学习 推荐博客: 张云飞VIR http://www.cnblogs.com/vir56k/tag/arcgis%20for%20android/ arcg ...

  7. JetBrains Rider 在 Mac 环境下将 cs 文件生成 exe

    因为自己的开发环境是 Mac + Rider 组合,想测试网络编程相关内容.想在Windows 虚拟机上运行一套代码来与Mac 机进行测试,但又不想在虚拟机上安装一套开发环境.最终找到的解决方案是通过 ...

  8. Dapper --Execute

    Dapper-Execute Ececute是一种可被任何IDbConnection类型的对象调用的扩展方法.它可以执行一次或多次命令, 并返回受影响的行数.此方法通常用于执行存储过程.插入.更新.删 ...

  9. A Plug for UNIX UVA - 753（网络流）

    题意:n个插座,m个设备及其插头类型,k种转换器,没有转换器的情况下插头只能插到类型名称相同的插座中,问最少剩几个不匹配的设备 lrj紫书里面讲得挺好的. 先跑一遍floyd,看看插头类型a能否转换为 ...

  10. [haut] 1281: 邪能炸弹 dp

    题目描述 正在入侵艾泽拉斯的古尔丹偶然间得到了一颗邪能炸弹,经过研究,他发现这是一颗威力极其巨大且难以控制的炸弹.但是精通邪能的古尔丹突然有了一个大胆的想法,他对炸弹进行了一些小小的改造.这使得炸弹需 ...