文本样式

最新推荐文章于 2023-11-29 14:09:45 发布

心奔

最新推荐文章于 2023-11-29 14:09:45 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： CSS文本样式字体水平对齐方式文本溢出

本文链接：https://blog.csdn.net/g960526/article/details/89308772

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文本样式

文本样式作用:文本样式是针对文字一些排列相关的样式,如字体间距,对齐方式等

源代码如下:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本样式</title>
		<meta name="descrption" content="">
		<meta name="keywords" content="">
		<style type="text/css">
			.box{
				width:500px;
				height:500px;
			}
			.box li{
				margin:10px;
				padding:10px;
				background-color:deeppink;
				list-style:none;
				color:black;
			}
			.text-align{
				text-align:center;
				/*
				文本的水平对齐方式
					left 左对齐
					right 右对齐
					center 居中对齐
				*/
			}
			.text-decoration{
				text-decoration:underline;
				/*
				文本修饰
					overline 上划线
					underline 下划线
					line-through 中划线
					none  去掉下划线（无修饰）
				*/
			}
			.text-indent{
				text-indent:30px;
				text-indent:2em;/* (设置首行缩进两个字符) */
				/*
				设置首行缩进距离
					
				*/
			}
			.text-overflow{   /* 三个一块写 */
				text-overflow:ellipsis;/*  超出部分用省略号显示 */
				white-space:nowrap;  /* 让文本在一行显示 */
				overflow:hidden; /*  激活让值生效 */
				/*  
				文字超出了元素范围之后进行处理
					clip 裁剪超出部分 
					ellipsis 超出出现省略号
					1.文本超出 (white-space:nowrap;让文本强制在一行显示)
					2.激活让值生效

				*/
			}
			.text-transform{
				text-transform:uppercase;
				/*
					none（正常显示）、
					capitalize（单词首字母大写）、
					uppercase（全部大写）
					lowercase（全部小写）

				*/
			}
			.letter-spacing{
				letter-spacing:30px;
				/*设置字与字之间的间距*/
			}
			.word-spacing{
				word-spacing:30px;
				/*设置词与词之间的间距*/
			}
			.white-space{
				white-space:pre-line;
				/*
					设置源代码里面的空格和换行的处理方式
						nowrap（只有遇到<br />才会换行 
							合并缩进和换行为空格 文本不会自动换行）
						normal（默认换行方式）
							合并缩进和换行为空格  文本自动换行
						pre （保留空格、缩进、换行，但是文本不会自动换行）
							代码里面写什么样子，浏览器里面就是什么样子
						pre-line （合并空格、缩进、换行，文本自动换行）
							合并空格缩进，只保留换行，文本自动换行
						pre-wrap（保留空格、缩进、换行、并且文本自动换行） 

				*/
			}
			.word-break{
				width:200px;
				word-break:break-all;
				/*
				单词换行方式
					默认情况下
						中文  单词内换行（一个字一个字换行）
						英文 不会在单词内换行（不会一个字母一个字母换行，只会单个单词换行）
					break-all 
						全部都允许在单词内换行，不管中英文，都是一个字一个字或一个单词一个单词换行
					keep-all
						中文英文都不允许在单词内换行，中文一个词一个词换行，不是一个字一个字换行，英文也是一个词一个词换行
				*/
			}
		</style>

	</head>
	<body>
		<ul class="box">
			<li class="text-align">字体水平对齐方式</li>
			<li class="text-decoration">文本修饰 text-decoration</li>
			<li class="text-indent">首行缩进 text-indent 首行缩进 text-indent 首行缩进 text-indent 首行缩进 text-indent</li>
			<li class="text-overflow">文本溢出处理 text-overflow 文本溢出处理 text-overflow 文本溢出处理 text-overflow 文本溢出处理 text-overflow 文本溢出处理 text-overflow 文本溢出处理</li>
			<li class="text-transform">文本字母处理 text-transform guxineben  haokaixin</li>
			<li class="letter-spacing">letter-spacing 字间距</li>
			<li class="word-spacing">word-spacing 词间距</li>
			<li class="white-space">
				文本换行方式  
				white-space
			</li>
			<li class="word-break">
				单词的换行方式 word-break
			</li>
			<li>
				把比较特殊的符号变成没有意思的（转义符号）
				转义字符：
				&lt;div>div标签&lt;/div>
			</li>
		</ul>

	</body>
</html>

效果图如下:
在这里插入图片描述
文本样式中的文本溢出处理需要注意三兄弟需要一块写(overflow text-overflow white-spacing),