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

 

本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/5548691.html   ,如需转载请自行联系原作者


相关文章
|
6月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
209 4
|
2天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
26 6
|
3月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
49 1
简单几行代码CSS实现网页自动打文字效果
|
6月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
56 0
|
3月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
3月前
|
前端开发
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
|
5月前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
56 5
|
4月前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
67 0
|
6月前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
6月前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码