css常用小技巧

• 解决 inline-block元素设置overflow:hidden属性导致相邻行内元素项下偏移

.wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

• 超出部分显示省略号

// 单行文本
.wrap {
  overflow: hidden;     // 超出部分隐藏
  text-overflow: ellipsis;    // 超出部分显示省略号
  white-space: nowrap;    // 规定段落中的文本不进行换行
}

// 多行文本
.wrap {
  width: 100%;
  overflow: hidden;
  display: -webkit-box;     // 将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient: vertical;   // 设置伸缩盒对象的子元素的排列方式
  -webkit-line-clamp: 3;   // 限制块元素中显示的文本的行数
  word-break: break-all;   // 让浏览器实现在任意位置的换行
} 

• css实现不换行、自动换行、强制换行

// 不换行
.wrap {
  white-space: nowrap;
}
// 自动换行
.wrap {
  word-wrap: break-word;
  word-break: normal;
}
// 强制换行
.wrap {
  word-break: break-all;
}

• css实现文本两端对齐

.wrap {
  text-align: justify;
  text-justify: distribute-all-lines;    // ie6-8
  text-align-last: justify;     // 一个块或行的最后一行对齐方式
  -moz-text-align-last: justify;
  -webkit-text-align-last: justify;
}

• 实现文字竖向排版

// 单列展示时
.wrap {
  width: 25px;
  line-height: 18px;
  height: auto;
  font-size: 12px;
  padding: 8px 5px;
  word-wrap: break-word;    // 英文的时候需要加上这句，自动换行
}
// 多列展示时
.wrap {
  height: 210px;
  line-height: 30px;
  text-align: justify;
  writing-mode: vertical-lr;      // 从左向右
  writing-mode: tb-lr;              // IE 从左向右
  // writing-mode: vertical-rl;      // 从左向右
  // writing-mode: tb-rl;              // IE 从左向右

• cursor 属性

.wrap {
  cursor: pointer;           // 小手指
  cursor: help;              // 箭头加问好
  cursor: wait;              // 转圈圈
  cursor: move;           // 移动光标
  cursor: crosshair;     // 十字光标

• Text-transform 和 Font Variant

p { text-transform: uppercase }   // 将所有字母变成大写字母
p { text-transform: lowercase }   // 将所有字母变成小写字母
p { text-transform: uppercase }   // 首字母大写
p { text-transform: small-caps }   // 将字体变成小型大写字母

• 自定义滚动条

overflow-y: scroll;
整个滚动条
::-webkit-scrollbar {
  width: 5px;
}
滚动条的轨道
::-webkit-scrollbar-track {
  background-color: #ffa336;
  border-radius: 5px;
}
滚动的滑块
::-webkit-scrollbar-thumb {
  background-color: #ffa336;
  border-radius: 5px;
}

• 让HTML识别string里的'\n'并换行

body {
  white-space: pre-line;
}

• 实现一个三角形

.wrap { 
  border-color: transparent transparent green transparent; 
  border-style: solid; 
  border-width: 0px 300px 300px 300px; 
  height: 0px; 
  width: 0px; 
}

• 移出被点链接的边框

a { outline: none }
a { outline: 0 }

• 子元素固定宽度 父元素宽度被撑开

// 父元素下的子元素时行内元素
.wrap {
  white-space: nowrap;
}
// 若父元素下的子元素是块级元素
.wrap {
  white-space: nowrap;         // 子元素不被换行
  display: inline-block;   
}

• 让div里的图片和文字同时上下居中

.wrap {
  height: 100;
  line-height: 100; 
}
img {
  vertical-align: middle
}
// vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素
// vertical-align：baseline/top/middle/bottom/sub/text-top;

• 边框字体同色

.wrap {
  width: 200px;
  height: 200px;
  color: #000;
  font-size: 30px;
  border: 5px solid currentColor;
  // border: 5px solid;            实现二
}

更多css技巧