css 常用办法

选择器

选择器

• 全部选择器 *
• 获取直接子元素 >
• 获取某选择器结果的第一个元素 .selector :fisrt-child
• 获取某选择器结果的最后一个元素 .selector:last-child

自动换行

实现scroll

将需要scroll的部分放到一个div里，div这么处理

<div style=" height: document.getElementByClass('selector')[0].clientHeight; overflow-y: auto ">
</div>

实现文本折叠

• 实现文本折叠

css
.selector{
    word-wrap: break-word;
    work-break: break-all
}

• 实现多行文本在多于某行后折叠，最后一行结尾处显示...

    text-overflow: ellipsis;
    display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 12; /* number of lines to show */

• 接上条需求，不想在最后一行结尾处显示，而是想再最后一行的中间显示...

html
      <p id="content" >{props.value}</p>
      {
        collapse &&
        <span id="expand" onClick={()=>{
          setSytleByPropety('warpper','-webkit-line-clamp','');
          setCollapse(false)
        }}>...<span id="expend-text">展开<Icon id="downIcon" type="down" />
          </span></span>
      }

css
    #expand {
        // padding: 0 25px  0 0;
        width: 10em;
        position: absolute;
        right: 25px;
        bottom: 0;
        background: #fff;
        font-size: 14px;
        color: #657180;
    }

    #expend-text {
        position: absolute;
        right: 0;
        color: #4876f1;
        margin-left: 5px;
    }
    #downIcon{
        font-size: 14px;
        color: rgba(0, 0, 0, 0.38);
        margin-left: 4px;
    }

实现一条横线

使用hr属性

        border-top: 1px solid rgba(0,0,0,0.07);
        border-bottom: 0px;