【CSS】文本偶尔用到的属性

__Pluto__

已于 2024-08-08 12:09:26 修改

阅读量88

点赞数 1

分类专栏： css 文章标签： css 前端 html

于 2024-08-01 17:54:04 首次发布

本文链接：https://blog.csdn.net/weixin_49611304/article/details/140853819

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>【css】文本</title>
		<style>
			body div {
				margin: 20px 0;
				background-color: #c1c1c1;
			}
			.txt3 span {
				display: inline-block;
				width: 100px;
				height: 100px;
				background-color: red;
				
			}
		</style>
	</head>
	<body>
		<div class="txt1" style="text-align: justify;">当 text-align  属性设置为 "justify" 后，将拉伸每一行，</br>以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）</div>
		
		<div class="txt2" style="direction: rtl; unicode-bidi: bidi-override;">文本方向: direction 和 unicode-bidi 属性可用于更改元素的文本方向</div>
		
		<p>垂直对齐: vertical-align 属性设置元素的垂直对齐方式, 如下：</p>
		<div class="txt3" style="height: 200px;">
			<span class="txt3-item txt3-item1" style="vertical-align: text-top;">text-top 对齐</span>
			<span class="txt3-item txt3-item2" style="vertical-align: middle;">middle 对齐</span>
			<span class="txt3-item txt3-item3" style="vertical-align: text-bottom;">text-bottom 对齐</span>
		</div>
		
		<div style="padding: 10px 0; text-decoration: none;">文字装饰: text-decoration 属性用于设置或删除文本装饰; text-decoration: none; 通常用于从链接上删除下划线：
			<p style="text-decoration: overline;">text-decoration: overline;</p>
			<p style="text-decoration: line-through;">text-decoration: line-through;</p>
			<p style="text-decoration: underline;">text-decoration: underline;</p>
		</div>
		
		<div class="txt5">文本转换: text-transform 属性用于指定文本中的大写和字母。
			<p class="text5-item1" style="text-transform: uppercase;">大写: text-transform: uppercase;</p>
			<p class="text5-item2" style="text-transform: lowercase;">小写: text-transform: LOWERCASE;</p>
			<p class="text5-item3" style="text-transform: capitalize;">首字母大写：text-transform: capitalize;</p>
		</div>
		
		<div style="text-indent: 2em; letter-spacing: 10px;">文字缩进: text-indent 属性用于指定文本第一行的缩进; </br> <spna style="letter-spacing: -1px;">字母间距: letter-spacing 属性用于指定文本中字符之间的间距。</spna></div>
		
		<div style="word-spacing: 50px;">字间距: word-spacing属性用于指定文本中单词之间的间距。 增加或减少单词之间的间距</div>
		
		<div style="width: 300px; white-space: nowrap;">空白: white-space 属性指定元素内部空白的处理方式 nowrap 禁用元素内的文本换行</div>
	</body>
</html>