Web中一些常用效果

单行、多行文本溢出显示省略号

1、单行文本溢出显示省略号

div{overflow : hidden;white-space: nowrap;text-overflow: ellipsis;}

2、多行文本溢出显示省略号

方法一：

div{overflow : hidden;display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow: ellipsis;}

方法二：

div{position:relative;line-height:12px;height:24px;overflow:hidden;}
div::after{content:"...";position:absolute;bottom:0;right:0;}

英文字母自动换行：

style="word-break:break-all;word-wrap:break-word;"

禁止自动换行

h1{white-space:nowrap;}

网站推广

<meta name="keywords" content="value"/>

<meta name="description" content="value"/>

<meta name="author" content="value"/>

<meta http-equiv="content-type" content="text/html; charset=gb2312"/>

<meta name="date" content=""/>

<meta name="copyright" content=""/>

table表格

属性	描述	CSS
border-collapse	规定是否合并表格边框	2
border-spacing	规定相邻单元格边框之间的距离	2
caption-side	规定表格标题的位置	2
empty-cells	规定是否显示表格中的空单元格上的边框和背景	2
table-layout	设置用于表格的布局算法	2

表格样式

.table_border{
    border: solid 1px #B4B4B4;
    border-collapse: collapse;  
}
.table_border tr th{
    background:url("../../images/gray/bg_table_th.gif") repeat;
    padding-left:4px;
    height:27px;
    border: solid 1px #B4B4B4;
}
.table_border tr td{
    height:25px;
    padding:4px;
    border: solid 1px #B4B4B4;
}

<table class="table_border" width="100%" border="0" id="high_light" lang="tabRowData"
         cellpadding="0" cellspacing="0">

         <tr>
               <td><td>
         </tr>
</tabl>

img在table中显示导致table有缝隙
解决方法：设置img{display:block;}

网页上的时钟

<div align="center" id="time"></div>

setInterval("time.innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());", 1000);

table单元格强制不换行

table td{word-break: keep-all; white-space: nowrap;}

div居中

body{text-align:center;}
div{margin-right:auto;margin-left:auto;}

说明：首先在父级元素定义text-align:center;使父级元素内的内容居中，对于IE这样设定就已经可以了，但在其他浏览器中不能居中。需要再加上margin-left:auto;margin-right:auto;如果想用这个方法使整个页面居中，不要套在一个div里，可以拆出多个div，在拆出的div里定义margin-left:auto;margin-right:auto;就可以了。

div中的内容垂直居中

body{text-align:center;}
div{margin-left:auto;margin-right:auto;height:200px;line-height:200px;vertical-align:middle;}

说明：vertical-align:middle;表示行内垂直居中，需要将行距增加到和整个div一样高line-height:200px;然后插入文字，就垂直居中了。

link状态的设置顺序

a:link

a:visited

a:hover

a:active

textarea自适应内容高度

<textarea onpropertychange='this.style.height=this.scrollHeight' oninput="this.style.height= (this.scrollHeight-14)+'px';"></textarea>