CSS代码记录

1. 内容横向滚动的代码

.ul {
    display: box;
    display: -webkit-box;
    width: 250px;
    background: yellow;
    overflow-y: hidden;
    overflow-x:auto;
}
.li {
    flex-shrink:0;
    -webkit-flex-shrink: 0;
    width: 100px;
    height: 50px;
    background: red;
    margin-right: 5px;
}

<div class="ul">
    <div class="li">1</div>
    <div class="li">2</div>
    <div class="li">3</div>
    <div class="li">4</div>
    <div class="li">5</div>
</div>

2. 避免浏览器自动压缩空格问题。

有时在显示内容，文本中有多个空格相连，但是浏览器会自动压缩空格，这样就让多个空格看起来像一个空格。

方法1：

替换空格字符为 ，但是这种方法在英文文本的断词上会出问题，会无法很好的断词换行，所以并不是很好。

方法2：

既然浏览器会压缩多个空格，那只要保证文本里每次只有一个空格相邻就可以了。 
□ -> □ 
□□ -> □  
□□□ -> □ □ 
□□□□ -> □ □  

text = text.replace(/[ ]{2}/g, '  ');