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. Luogu 3267 [JLOI2016/SHOI2016]侦察守卫

    以后要记得复习鸭 BZOJ 4557 大佬的博客 状态十分好想,设$f_{x, i}$表示以覆盖完$x$为根的子树后还能向上覆盖$i$层的最小代价,$g_{x, i}$表示以$x$为根的子树下深度为$ ...

  2. pentaho和spark-sql对接

    pentaho可以和hive做对接,所以和spark-sql做对接也是妥妥的.结果让人很失望了啊,我配置了很久都搞不定,最后脑袋突然灵机一动打通了. 1:替换pentaho自带的hive驱动. 路径 ...

  3. jemalloc和内存管里

    netty的buffer引入了缓冲池.该缓冲池实现使用了jemalloc的思想.为了看懂这块代码学写了内容分配的知识.这里讲的内存分配是堆的内存分配,其他内容本文不会涉及. 内存分配是面向虚拟内存的而 ...

  4. Tomact和XML配置文件

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

  5. Boot Option Menu

    SATA HDD:TOSHIBA MQ02ABF100    1000G SATA HDD:SAMSUNG MZVLW512HMJP-000L2   => Invalid Partition T ...

  6. Altium Designer 3D模型的下载与添加

    先 先晒几个图:是不是很逼真啊..  ---------------------------------------教程---------------------------------------- ...

  7. javax.servlet.ServletConfig接口(五)

    主要作用是保存web.xml文件里面的配置信息 一个servlet对应一个ServletConfig,100个servlet对应100个ServletConfig.   代码如下(单个获取和获取所有) ...

  8. 对Dapper的一点改造

    微软推出的ORM, EF在我开发的项目中给我的感觉一直都是慢.优点是高度封装的底层.便于开发. Dapper在多篇性能比较的网站中.都是名列前三.缺点是手写SQL,不便于开发.   如果能结合EF的优 ...

  9. jmeter：dubbo接口测试

    最近工作中接到一个需求,需要对一个MQ消息队列进行性能测试,测试其消费能力,开发提供了一个dubbo服务来供我调用发送消息. 这篇博客,介绍下如何利用jmeter来测试dubbo接口,并进行性能测试. ...

  10. Django会话，用户和注册之cookie

    HTTP状态和TCP不一样,HTTP是无状态的,也就是这一次请求和下一次请求之间没有任何状态保持,我们无法根据请求例如IP来识别是否在同一人的连续性请求.就像我们在访问网站的时候,输入了用户名和密码, ...