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. 杭电acm 1037题

    本题应该是迄今为止最为简单的一道题,只有一组输入,输出也简单.... /****************************************** 杭电acm 1037题 已AC ***** ...

  2. PCL—点云分割（超体聚类） 低层次点云处理

    博客转载自:http://www.cnblogs.com/ironstark/p/5013968.html 1.超体聚类——一种来自图像的分割方法 超体(supervoxel)是一种集合,集合的元素是 ...

  3. p2234&bzoj1588 营业额统计

    传送门 题目 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每天的营业额 ...

  4. 初识 Redis

    浏览目录 什么是redis redis的特点 redis的安装和基本使用 操作模式 连接池 操作 string操作 hash操作 list操作 什么是Redis? redis是一个key-value存 ...

  5. 创建Mat对象

    Mat 是一个非常优秀的图像类,它同时也是一个通用的矩阵类,可以用来创建和操作多维矩阵.有多种方法创建一个 Mat 对象. 1.构造函数方法 下面是一个使用构造函数创建对象的例子. 常用的构造函数 2 ...

  6. Ubuntu 切换到桌面 快捷键设置

    设置完以上步骤后,这接windows系统键+d,即可切换到桌面. ps:按Alt+Tab键,可以切换到自己想要的图标进程.

  7. 打印sql语句

    root->trace hibernate->trace ,然后,改配置 全文搜索:show_sql,将所有的show_sql改为true. 这样,就会显示sql语句了.

  8. kaggle gradient_descent

    kaggle gradient_descent 1.描述 自写梯度下降 2.代码 import numpy as np import matplotlib.pyplot as plt # train_ ...

  9. APP 市场需求网址

    http://mi.talkingdata.com/terminals.html?terminalType=4

  10. Java50道经典习题-程序44 偶数的素数和

    题目:一个偶数总能表示为两个素数之和.分析:一个偶数可能会有不止一对两个素数之和的情况 例如:20=3+17 20=7+13 import java.util.Scanner; public clas ...