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:

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

方法2:

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

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

 

posted @   海角在眼前  阅读(333)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
历史上的今天:
2015-06-01 移动Web开发的bug及解决方案
点击右上角即可分享
微信分享提示