CSS考书籍：

《CSS Secrets》

垂直居中

1. table, table-cell vertical-align

   html:
   
   <div class=‘container'>
       <div class=‘content'>
           test
       </div>
   </div>
   
   css:
   
   .container {
       display: table;
   }
   
   .content {
       display: table-cell;
       vertical-align: middle;
   }
   

2. line-height

3. transform:translateY:(-50%)

html：

<div class=‘container'>
    <span class='v-center'> 相对于父元素垂直居中显示 </span>
</div>

css: 

// 父容器设置为相对定位
.container {
    position: relative;
}
// 子元素设置为绝对定位
.v-center {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%)
}

1. display: flex; align-items:center;

右侧固定宽且浮动，左侧自由伸展

html:

<div class=‘container clearfix'>
  /*在右侧显示的要写在前面*/
  <div class=‘right'></div>
  <div class=‘left'></div>
</div>

css:

.container {
  min-width: 300px;
  white-space: nowrap;
}

.left {
  margin-right: 50px;
}

.right {
   float: right;    
   width: 50px;
 }

通用类

1. 元素不可选

.no-selecting {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-touch-callout: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
}

表格布局，实现多列、等高展示效果 (浮动效果)

<div class="wrapper">
    <div class="inner-wrapper">
        // variable height divs
        <div class="section">
            1
        </div>
        <div>2</div>
        <div>3</div>
    </div>
</div>


CSS:

.wrapper {
    display: table;
    min-height: 300px;
    height: auto;
    width: 100%;
}

.inner-wrapper {
    display: table-row;
}

.section {
    display: table-cell;
    width: 150px;
}

检测html元素(div)内容是否溢出

需要设div 不可换行：
.test {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<div class="test"></div>

const $content = document.querySelector(".test")
this.isTextOverflow = $content.scrollWidth > $content.offsetWidth;

参考： https://wincent.com/wiki/clientWidth_vs_offsetWidth_vs_scrollWidth

文本溢出隐藏左侧内容，显示右侧的内容

<div class="left-overflow">这里是要（显示）的文本&#x200E;</div>

.left-overflow {
  overflow:hidden;
  // 溢出隐藏左侧
  direction:rtl;
  padding-top: 3px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  // text-overflow生效条件
  display: inline-block;
}


注意事项：
设置direction:rtl;之后， 文本中的）]等字符会自动跑到左边，与预期的显示相反；
解决： 在整个文本的后面追加一个&#x200E;
参考https://www.w3.org/TR/WCAG20-TECHS/H34.html