尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

css3文本设置:

css3文本设置:
📅 发布时间:2026/7/28 14:39:13

1.文本对齐
①.text-align:center; 文本水平对齐方式。
left: 内容左对齐。
center: 内容居中对齐。
right: 内容右对齐。
justify: 内容两端对齐。
start: 内容对齐开始边界。(CSS3) (CSS3中规定的默认值)
end: 内容对齐结束边界。(CSS3)
②.text-align-last:center; 文本最后一行的对齐方式(如果只有一行,既是第一行,也是最后一行)它是CSS3新增属性。
auto: 无特殊对齐方式。 (默认值)
剩余值和text-align一样。
③.vertical-align: baseline;设置文字基于基线的对齐方式
baseline 基线 默认值
top把当前盒的top和父级的内容区的top对齐
bottom把当前盒的bottom与行盒的bottom对齐
middle 把此元素放置在父元素的中部。
作用:文字和图片在一行显示,vertical-align:middle;
inline-block的元素在一行显示,有的有内容,有的没内容;vertical-align:bottom;
表格的单元格,vertical-align可以控制文字在单元格的垂直对齐方式。
2.文本阴影
text-shadow 设置文本阴影
none: 无阴影 (默认值)
text-shadow: 2px 2px;只设置水平垂直偏移值,阴影和文字颜色一样。
text-shadow: 3px 3px orange;让阴影和文字颜色不一样,设置文字阴影颜色。
text-shadow最多设置4个值。
text-shadow: 3px 3px 5px orange;
水平偏移值(可为负值)
垂直偏移值(可为负值)
阴影模糊值(不允许负值)
阴影颜色
3.文本溢出
text-overflow:ellipsis; 设置文本内容溢出容器时的状态
clip: 当内容溢出块容器时,将溢出部分裁切掉。(默认值)
ellipsis: 当内容溢出块容器时,将溢出部分替换为省略号。(…)。
注意:要使得 text-overflow 属性生效,必须先设置文字不换行和盒子溢出隐藏。
white-space: nowrap;设置文字不换行
overflow: hidden;设置盒子溢出隐藏
text-overflow: ellipsis;设置溢出文本的处理
4.文本换行
①.white-space 设置元素是否保留文本间的空格、换行;指定文本超过边界时是否换行。
<pre></pre>标签中的文字会原样显示。
white-space:normal; 默认处理方式。会将序列的空格合并为一个。
white-space:nowrap; 与normal一致,不同的是它强制不换行。
white-space:pre-line; 与normal一致,但是会保留文本输入时的换行。
white-space:pre; 原封不动的保留你输入时的状态,空格、换行都会保留,并且当文字超出边界时不换行。等同 pre 元素效果。
white-space:pre-wrap; 与pre一致,不同的是文字超出边界时将自动换行。
②.word-wrap / overflow-wrap 设置内容超过指定容器的边界时是否换行。
只影响英文,不影响中文。
overflow-wrap/word-wrap:noraml;(默认值)一个长单词超出边界也不换行
overflow-wrap/word-wrap:break-word;一个长单词超出边界换行
③.word-break 文本的字内换行行为。(了解)
word-break: noraml;中文正常换行显示
word-break:keep-all;中文里若没有空格或者标点符号,就不换行。不太适合
5.文本装饰
text-decoration CSS3变成了复合属性。
text-decoration-line 设置文本装饰线的位置
none:指定文字无装饰 (默认值)
underline:下划线。 overline:上划线。 line-through:中划线。
text-decoration-style 文本装饰线条的形状
solid:实线 (默认)。 double: 双线。
dotted: 点状线条。 dashed: 虚线。
wavy: 波浪线。
text-decoration-color 文本装饰线条的颜色
复合属性:text-decoration: line-through solid red;
6.文本描边
文字描边功能仅 webkit 内核浏览器支持
-webkit-text-stroke-color: red;设置文字描边的颜色,取颜色单位。
-webkit-text-stroke-width: 2px;设置文字描边的宽度,取长度单位。
-webkit-text-stroke:3px #fff;复合属性,设置文字描边宽度和颜色。
7.其它文本设置
①.text-transform 设置文本如何转换大小写。
text-transform: none;无转换
text-transform: capitalize;将每个单词的第一个字母转换成大写
text-transform: uppercase;将每个字母转换成大写
text-transform: lowercase;将每个字母转换成小写
②.tab-size 设置内容中制表符的长度。 取值长度单位。(了解)
默认一个table是4个空格,webstrom会把tab转换成4个空格。
tab-size:8; 表示制表符宽度是8个空格的宽度。
tab-size: 100px;用长度值指定制表符的长度。不允许负值。
注意:只有当white-space 的属性值为:pre | pre-wrap时,该属性的定义才有效。

相关新闻

  • three.js 编辑器的 Roadmap 与规划
  • AI 性能平台选型对比:Prometheus vs VictoriaMetrics vs Grafana Cloud 在推理监控场景的评估
  • 终极指南:如何用免费工具VR-Reversal在普通设备上播放VR视频

最新新闻

  • 无人机体系化竞争:从单机对抗到系统集成的技术壁垒与工业逻辑
  • React组件化开发:核心原则与工程实践
  • 马奈绘画特征在油画创作《迎风的青春》中的应用研究
  • html中的锚点介绍和使用
  • 【毕业设计选题】计算机专业毕业设计选题题目分享 2026
  • 【JAVA课程设计/毕业设计】基于SpringBoot+Vue的校园共享交通工具信息化管控系统实现 智慧校园单车资源分配与租借管理平台【附源码、数据库、万字文档】

日新闻

  • 力旷智能:伺服驱动系统在制药收瓶设备中的应用解析
  • 2026 网安入门避坑指南,零基础如何避开无效学习直接上手实战
  • 揭秘CFC项目:如何通过手机摄像头实现850kbps无网络文件传输

周新闻

  • 大连理工大学与东京大学联手打造的“主动型AI助手“
  • 170.2026年国家级科研瓶颈:超精密单点金刚石切削(SPDT)光学表面生成
  • SongBloom:革命性歌曲生成框架深度解析——如何通过交织自回归与扩散模型创作完整音乐

月新闻

  • 2026年6月公司网站搭建最新热门渠道测评:四大低成本/零代码平台对比+避坑
  • 【Linux】Linux arm 编译QT程序,出现expected “}“报错
  • 【MATLAB例程】四基站二维AOA定位与距离辅助增强对比仿真。基于角度观测和测距修正的固定目标平面定位精度分析

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号