一，简介
CSS文本操作是前端开发中的一个关键领域。通过运用各种文本样式和排版技巧，我们可以为网页中的文本内容增添视觉效果和良好的用户体验。掌握CSS文本操作的知识，将为我们打开一扇全新的创作大门，使我们能够轻松地调整字体样式、颜色、对齐方式、装饰效果等，以及处理文字溢出和换行等问题。在本篇文章中，我们将深入了解六种重要的CSS文本操作技术，帮助您提升前端开发技能，并创建出令人印象深刻的网页文本效果。让我们一起来探索这些必知的CSS文本操作技巧，为您的前端项目注入新的创意和魅力。
二，css文本操作集锦
以下是我整理的部分文本操作属性列表
color: 设置文本颜色font-family: 设置字体系列font-size: 设置字体大小font-weight: 设置字体粗细font-style: 设置字体样式（如斜体）font-variant: 设置字体变体（如小型大写字母）text-align: 设置文本对齐方式text-decoration: 设置文本装饰效果（如下划线、删除线）text-indent: 设置文本首行缩进text-transform: 设置文本大小写转换text-shadow: 设置文本阴影line-height: 设置行高letter-spacing: 设置字符间距word-spacing: 设置单词间距white-space: 设置空白处理方式text-overflow: 设置文本溢出处理方式text-wrap: 设置文本换行方式text-justify: 设置文本对齐方式text-align-last: 设置最后一行文本对齐方式text-align-vertical: 设置垂直文本对齐方式direction: 设置文本方向unicode-bidi: 设置双向文本处理方式text-emphasis-style: 设置文本强调样式text-emphasis-color: 设置文本强调颜色text-emphasis-position: 设置文本强调位置text-underline-style: 设置下划线样式text-underline-color: 设置下划线颜色text-underline-position: 设置下划线位置text-overline: 设置上划线text-overline-style: 设置上划线样式text-overline-color: 设置上划线颜色text-line-through: 设置删除线text-line-through-style: 设置删除线样式text-line-through-color: 设置删除线颜色text-align-all: 设置所有文本块对齐方式text-shadow-offset-x: 设置文本阴影水平偏移量text-shadow-offset-y: 设置文本阴影垂直偏移量text-shadow-blur-radius: 设置文本阴影模糊半径text-shadow-color: 设置文本阴影颜色text-shadow: 综合设置文本阴影text-rotate: 设置文本旋转角度text-rotate-upright: 设置文本直立text-combine-upright: 设置横向排列的文本合并成竖排text-emphasis-style-symbols: 设置文本强调样式的符号text-emphasis-style-symbols-circled: 设置文本强调样式的环绕符号text-emphasis-style-symbols-open: 设置文本强调样式的开放符号text-emphasis-style-symbols-ideographic: 设置文本强调样式的表意符号text-emphasis-style-filled: 设置文本强调样式的填充样式text-emphasis-style-open: 设置文本强调样式的边框样式text-emphasis: 综合设置文本强调样式text-underline-offset: 设置下划线垂直偏移量text-decoration-line: 设置文本装饰线条类型text-decoration-color: 设置文本装饰颜色text-decoration-style: 设置文本装饰样式text-decoration-thickness: 设置文本装饰线条粗细text-decoration-skip: 设置文本装饰跳过元素text-decoration-skip-ink: 设置文本装饰跳过墨迹ruby-align: 设置注音对齐方式ruby-merge: 设置注音合并方式ruby-align-last: 设置最后一行注音对齐方式ruby-overhang: 设置注音悬挂效果ruby-position: 设置注音位置ruby-span: 设置注音跨度hanging-punctuation: 设置标点悬挂效果initial-letter: 设置首字母效果initial-letter-align: 设置首字母对齐方式hyphens: 设置断字方式overflow-wrap: 设置单词溢出处理方式word-break: 设置单词换行处理方式word-wrap: 设置单词换行处理方式orphans: 设置孤行处理方式widows: 设置断行处理方式tab-size: 设置制表符宽度columns: 设置多列布局column-width: 设置列宽度column-count: 设置列数column-gap: 设置列间距column-rule: 设置列的边框规则column-rule-width: 设置列的边框宽度column-rule-style: 设置列的边框样式column-rule-color: 设置列的边框颜色column-span: 设置元素是否跨列column-fill: 设置列的内容如何填充text-autospace: 控制是否自动插入空白字符text-spacing: 控制字符之间的间距text-align-character: 设置对齐文本的字符text-emphasis-color-adjust: 控制强调颜色是否与文字颜色一致text-id: 标识一个文本块元素text-justify-symbols: 控制对齐文本时单词之间的间距text-size: 设置文本块的大小text-size-adjust: 控制文本在移动设备上的大小调整text-spacing-adjust: 控制文本之间的间距调整text-size-adjustment: 控制文本的大小调整text-align-vertical: 控制垂直对齐元素内部文本text-justify-method: 控制对齐文本时添加或删除间距text-orientation: 控制文本方向text-combine-horizontal: 设置横向排列的文本合并方式text-combine-upright: 设置横向排列的文本合并成竖排text-underline-mode: 控制下划线的样式和模式text-emphasis-position-x: 设置文本强调的水平位置
三，常用css文本操作
以下代码列举了常用的文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本操作</title>
<style type="text/css">
.wp{
width: 200px;
height: 200px;
/* 设置border的宽度 */
border-width: 5px;
/* 设置border 的颜色*/
border-color: rgb(173, 17, 17);
/* 设置border的样式 */
border-style: dashed;
border: 10px #04be01 outset;
/* 单独设置一个边 */
border-bottom: 10px #f00 solid;
/* 让他的左边没有 */
border-left: none;
}
.show{
width: 200px;
height: 200px;
color: #ff0;
background: rgba(50, 46, 46,0.5);
/* 给文本设置下划线 */
text-decoration: underline;
/* 给文本设置中划线 */
text-decoration: line-through;
}
a{
text-decoration: none;
}
.text{
border: 1px #f00 solid;
/* 文本的转化全部小写 */
text-transform: lowercase;
/* 文本的转化全部大写 */
text-transform: uppercase;
/* 单词的首字母大写 */
text-transform: capitalize;
}
.hit{
border: 1px #f00 solid;
line-height: 30px;
}
.layout{
height: 400px;
border: 1px #f00 solid;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<!--
border 属性
border-width 设置border的宽度
border-color 设置border的颜色
border-style 设置border的样式
他们三个也可以写成
border：width style color;
border可以单独给某一个边设置border
border-top 设置 上边
border-left 设置 左边
border-bottom 设置 下边
border-right 设置 右边
常用的 border-style 值
1.solid 实线
2.dotted 圆点虚线
3.dashed 短线虚线
4.none 隐藏border
5.double 双实线 （不常用）
6.3D边框 （不常用）
groove 3D凹槽
ridge 3D凸槽
inset 内嵌
outset 外嵌
color属性，设置文本颜色
值：
1.英文单词
2.16进制颜色 0-F ，#跟6位表示颜色的数字，前两位表示红色，
中间两位表示绿色，后面两位表示蓝色#aabbcc如果 两两相等，则可以简写为#abc
（0是黑 F是白）
3. rgb（），rgba（）设置颜色
括号当中设置对应位置的数字，0-255，0表示黑色，255表示白色
rgb（255，0，0） 红色
rgba中的a 表示透明度， 取值范围是0-1， 0表示完全透明，1表示完全不透明
文本的修饰 text-decoration
值：
1.underline下划线
2.overline 上划线
3.line-through 中划线（删除线）
4.none 去掉线（没有文本修饰线）
文本的转化 text-transform
值：
1.lowercase 全部小写
2.uppercase 全部大写
3.capitalize 单词的首字母大写
行高 line-height
对于单行文本，line-height 设的高度如果和标签的高度一致则可以做垂直居中效果
如果是多行文本，可以理解为行间距
-->
<div class="wp"></div>
<div class="show">刀马旦</div>
<a href="##">中国国足</a>
<p class="text"> SAUG AUYAY sajsaS ASSAS sas</p>
<p class="hit">两情若是久长时，两情若是久长时，两情若是久长时，
两情若是久长时，两情若是久长时，两情若是久长时，两情若是久长时，
两情若是久长时，两情若是久长时，两情若是久长时，两情若是久长时，
两情若是久长时，两情若是久长时，两情若是久长时，两情若是久长时，
两情若是久长时，两情若是久长时，两情若是久长时，两情若是久长时，
两情若是久长时，两情若是久长时，两情若是久长时，两情若是久长时，
两情若是久长时，两情若是久长时，两情若是久长时，两情若是久长时，</p>
<div class="layout">
<!-- <span>该吃饭了</span> -->
<img style="border: 1px #f00 solid;" src="./微信.png" width="50" alt="">
</div>
</body>
</html>
2312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
