Lesson4（定位、超出隐藏）

1、外边框　　outline：1px solid blue;

外边框用法和边框相似，外边框不占空间，只会显示

2、定位 position

(1)相对定位　ｒｅｌａｔｉｖｅ：对自身的一种定位

　　　1>给父级设置相对定位之后，自己也跟随父级移动

　　　2>给元素设置相对定位之后，不会影响其他元素的位置(即没有脱离文档流、还占有原来的空间)

(２)绝对定位　ａｂｓｏｌｕｔｅ：相对于父级的定位　

　　1>脱离文档流，不占原来的空间

　　2>定位在不设置ｔｏｐ等方向值时，位置不会发生变化

　　３>定位的层级是要比ｆｌｏａｔ或者文本的层级要高，可以挡住他们

　　４＞决定定位的元素如果没有定位父级，会相对于ｈｔｍｌ文档来定位

（３）固定定位　ｆｉｘｅｄ

　　固定定位的元素在窗口的位置始终不变

３、超出

（１）ｏｖｅｒｆｌｗ　处理超出区域的内容

　　ｈｉｄｄｅｎ　隐藏、　ｖｉｓｉｂｌｅ　显示（默认值）、　ｓｒｃｏｌｌ　滑动、　auto　自动

注意：auto和ｓｒｃｏｌｌ的区别在于，ｓｒｃｏｌｌ始终显示滚动条，ａｕｔｏ只会在内容超出方向时显示滚动条

（２）ｔｅｘｔ－ｏｖｅｒｆｌｏｗ　处理某一个超出区域的单词

　　ｃｌｉｐ　超出部分被裁剪掉、　ｅｌｌｉｐｓｉｓ　超出的部分用省略号代替、　string　用一个指定的字符串，内容自定义，来代替超出的内容（部分浏览器可用，譬如：火狐）

（３）使用ｔｅｘｔ－ｏｖｅｒｆｌｏｗ前确保ｏｖｅｒｆ不是ｖｉｓｉｂｌｅ

时间： 2024-12-20 03:58:03

Lesson4（定位、超出隐藏）的相关文章

div中只显示2行文字超出隐藏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1{ width: 300px; overflow: hidden;//超出隐藏 text-overflow: ellipsis;//超出文本设置为... display:-webkit-box

设置一个DIV的文字超出隐藏，并用省略号表示未完待续

<div style="width:50px;height:18px;white-space: nowrap;overflow:hidden;text-overflow:ellipsis;">设置一个DIV的文字超出隐藏,并用省略号表示未完待续设置一个DIV的文字超出隐藏,并用省略号表示未完待续设置一个DIV的文字超出隐藏,并用省略号表示未完待续</div>

实例: <p>文字敢超出我就敢隐藏显示点点文字敢超出我就敢隐藏显示点点文字敢超出我就敢隐藏显示点点</p> css解决方法 1.常规css方法——可以实现IE,Safari,chrome,opera浏览器下文字溢出省略号表示现在在火狐的高版本也支持了(火狐低版本不支持) p{width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} 注

文字超出隐藏并显示省略号

文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法一是用程序开截取字符长度,这个其实也是可以的第二种是用样式来做,这里主要介绍一下用样式怎么来做吧,我话也不多说了吧直接上代码吧, css样式如下: .css1{ color:#6699ff;border:1px #ff8000 dashed; margin-bottom:20px; width: 20em;/*不允许出现半汉字截断*/ } .css2 { overflow: hidden; /

文字超出隐藏

1.单行文字 <html> <head> <meta charset="utf-8"> <style> #row{ display: block; /* 必备的四个条件 */ width:100px;/*宽度 */ overflow: hidden;/*超出隐藏*/ white-space: nowrap;/* 强制不换行 */ text-overflow:ellipsis;/*文字隐藏的格式 */ } </style> &l

table超出隐藏

table.order-table { table-layout: fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } table.order-table td { word-break: keep-all; /* 不换行 */ white-space: nowrap; /* 不换行 */ overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */ text-overflow: ellipsis ; /* 当对象内文本溢出时显示省

html 超出隐藏

span标签当内容超出强制不断行自动换行white-space:nowrap;white-space:norma;display:inline-block; 超出自动隐藏英方不断行显示 (必须在块元素内)overflow:hidden;white-space:nowrap; 而如果希望在文字后面加上个...,就可以使用text-overflow: ellipsis;一般的主流浏览器都支持这个属性

text-overflow:ellipsis实现超出隐藏时省略号显示

text-overflow:ellipsis;要达到的效果是:文字超出容器宽度时,文字被隐藏的文字用省略号代替.所以该属性只能用于块状元素或行内块元素中,对行内元素是不起作用的. 一般和white-space:noworp;(强制文字不换行),overflow:hidden;(文字溢出隐藏),一起使用. eg1: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5

超出隐藏显示

1.超出两行显示 overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; 2.超出一行隐藏 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 原文地址:https://www.cnblogs.com/yanghaifeng/p/9600053.html