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, '  ');