当前位置: 首页 > 科技观察

CSS实用技巧:文字处理

时间:2023-03-12 13:10:57 科技观察

前言作为程序员,我们也需要很多技巧来编写代码。好的代码可以让人耳目一新,通俗易懂,同时也能给自己带来成就感。因此,这里提供一些简单的CSS开发技巧,希望你能写出清爽、易懂、舒服、自然的代码。CSS实战技巧第一讲:文字处理本次总结主要针对CSS进行文字处理的技巧。有兴趣的朋友可以收藏一下。文本对齐CSS中最常用的对齐方式有居中对齐、左对齐(默认)和右对齐,实现起来非常简单。如下:p{text-align:center;text-align:left;text-align:right;}但是你用过两端对齐吗?只需添加text-align-last:justify样式。看例子:账号

密码
邮箱
scssstyle.justify-text{.li{padding:020px;margin-top:10px;width:100px;background-color:#f13f84;line-height:40px;text-align-last:justify;color:#fff;list-style:none;&:first-child{margin-top:0;}}}CSS实战技巧第一讲:文字处理文本排版方向现代书籍上的文字都是按照从左到右的顺序排列的,但是它和古代不同,文字是从右到左排列的,现在很多古籍、牌坊、石碑等上仍然可以看到从右到左的文字。CSS还可以调整文字排版的方向。用什么属性来控制它?writing-mode属性定义文本如何水平或垂直布局。writing-mode:horizo??ntal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lrhorizo??ntal-tb:从上到下水平方向的书写模式。即left-right-top-bottomvertical-rl:写法是垂直方向从右到左。即top-bottom-right-leftvertical-lr:垂直方向的内容从上到下,水平方向从左到右sideways-rl:内容从上到下垂直sideways-lr:内容是从下往上垂直排列如下看具体例子:

诗经

死生宽阔,
与子成说。
执子之手,
与子白头。

scssstyle.vertical-text{writing-mode:vertical-rl;//文字布局方向h3{padding-left:10px;font-weight:bold;font-size:18px;color:#d60f5c;}p{line-height:30px;//行距letter-spacing:7px;//文字间距color:#ee1166;}}CSS实用技巧第一讲:文字处理文字从右到排列左边红豆长在江南
春来送几枝
愿你多采摘
这东西最相思scssstyle.reverse-text{font-weight:bold;font-size:30px;color:#f13f84;width:200px;letter-spacing:-70px;//字母间距至少是字体的两倍-size}CSS实战技巧第一讲:文字处理文字溢出控制不管是PC还是H5,文字溢出处理都是很常见的,在非详情页上也经常用到。文本溢出处理分为:单行文本溢出和多行文本溢出。我们来看一个具体的例子:单行文字溢出昨夜雨疏风垂,沉睡余酒未散。试了问卷,却说海棠还是老样子。知否知否,应有绿肥红瘦。scssstyle.ellipsis{width:200px;overflow:hidden;//溢出隐藏text-overflow:ellipsis;//溢出修饰省略ellipsiswhite-space:nowrap;//文字不会换行}CSS实用技巧无.第一讲:文字处理中的多行文字溢出寻寻觅觅,冷清凄凉凄惨。忽冷忽热,呼吸最困难。三杯两杯淡酒,你怎么打得过他?夜深风急!雁过已过,心酸,却是旧识。黄花堆满地,憔悴破烂,谁能采摘?望窗外,暗中怎能独生!梧桐树也伴着细雨,点点滴滴在黄昏。这次是第一次,多一个担心的字眼!scssstyle.ellipsis{width:400px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;/*autoprefixer:off*/-webkit-box-orient:vertical;/*autoprefixer:on*/}CSS实战技巧第一讲:文字处理注意,使用文字溢出处理时,容器必须定义宽度。多行文字溢出,添加注释autoprefixer:offinscssstyle不是说明什么,但是,webpack打包编译时,如果没有这个注释,-webkit-box-orient:vertical会被忽略。文本选择颜色在浏览器中,当你选中文本,想要复制时,会不会发现选中的文本会有背景色和文字颜色?其实可以通过css来定义。使用::selection自定义文字选择颜色

红豆出南国,

春天送几枝。

愿你多采摘,

这东西最相思。

scss样式//全局文本选择样式::selection{background-color:#f13f84;color:#fff;}.select-color{line-height:30px;font-weight:bold;font-size:30px;color:#d60f5c;}//特定selector下的文字选择样式.special::selection{background-color:#00b7a3;}CSS实战技巧第一讲:文字处理总结复习知识点如CSS3及其选择器和伪元素伪类,温故而知新。使用Chrome的DevTools调试CSS,提示填充可以发现很多有趣的属性。尝试不同的方法来实现相同的功能并多练习。在项目中多尝试CSS的新特性,不要总是被低版本的浏览器束缚,一直难以提升。在用JS完成一个简单的效果之前,想一想是否可以用纯CSS来完成。这样你的CSS技能就可以稳步提高。最后感谢大家的支持。