本篇教程介绍了HTML+CSS入门 5个CSS容易遇到的坑，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

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

1 .inaline {
2      overflow: hidden;
3      white-space: nowrap;
4      text-overflow: ellipsis;
5 }

1.2多行文本、

1 .intwoline {
2      display: -webkit-box !important;
3      overflow: hidden;
4      text-overflow: ellipsis;
5      word-break: break-all;
6      -webkit-box-orient: vertical;
7      -webkit-line-clamp: 2; //多少行
8 }

2、不定宽高的水平垂直居中
2.1、直接设置在该元素上

1 selector {
2 　　position: absolute;
3 　　top: 50%;
4 　　left: 50%;
5 　　z-index: 3;
6 　　-webkit-transform: translate(-50%,-50%);
7 }

2.2、设置在父容器上

1 .parent{
2 　　justify-content: centent; //子元素水平居中
3 　　align-items: center;  //子元素垂直居中
4 　　display: -webkit-flex;
5 }

3、不可选

1 body {
2      -webkit-user-select: none;
3      -moz-user-select: none;
4      -ms-user-select: none;
5 }

 
4、超出显示省略号 ，文字换行
4.1、table：

 1 table {
 2      table-layout: fixed;
 3 }
 4 td {
 5      width: 100%;
 6      word-break: keep-all; //不换行
 7      white-space: nowrap; //不换行
 8      overflow: hidden;
 9      text-overflow: ellipsis; //当对象内文本溢出时显示省略号
10 }

4.2、div， li
兼容IE/Firefox/Chrome

1 div, li  {
2     display:block;
3     white-space:nowrap;
4     overflow:hidden;
5     text-overflow:ellipsis;
6 }

4.3、相关知识点
　　word-break: break-all;内容为英文时，只要没有空格，都会被当作是一个单词，所以不会换行，加上这样式后会折断自动换行。white-space: nowrap;
　　word-wrap: break-word;强制不换行
　　word-break: normal;自动换行
　　word-break: break-all;强制英文单词断行
5、css画实心圆

 1 .redPoint {
 2  　　width: 10px;
 3  　　height:10px;
 4  　　background-color: #f00;
 5  　　border-radius: 5px;
 6  　　-moz-border-radius: 5px;
 7  　　-webkit-border-radius: 5px;
 8  　　position: absolute;
 9  　　right: -10px;
10  　　top: 1px;
11 }

用例：
<td style="position: relative">少时诵诗书<span class="redPoint"></span></td>
父元素添加 position: relative ，子元素设置right属性为负时，可达到红点随文字长度而改变位置；
 
若table元素设样式有width： 100%时，可再用span标签包裹,添加 style="position: relative"
<td><span style="position: relative">少时诵诗书<span class="redPoint"></span></span></td>
 
6、遮罩层

 1 .maskLyayer {
 2     position: absolute;
 3     top: 0;
 4     left: 0;
 5     z-index: 1;
 6     width: 100%;
 7     height: 100%;
 8     opacity: 0.6;
 9     filter: alpha(opacity=60);
10     background-color: #000;
11 }
12 .div {
13     position: absolute;
14     top: 50%;
15     left: 50%;
16     z-index: 2;
17     transform: translate(-50%, -50%);
18     -ms-transform: translate(-50%, -50%);
19     -moz-transform: translate(-50%, -50%);
20     -webkit-transform: translate(-50%, -50%);
21     -o-transform: translate(-50%, -50%);
22 }

   

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！