CSS文本样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/109148886

1. text-overflow属性

1.1. text-overflow属性规定当文本溢出包含元素时发生的事情。

1.2. 默认值

1.3. 可能值

1.4. 例子

1.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>文本溢出处理</title>
		<meta charset="utf-8" />
		<style type="text/css">
			div {
				border: 1px solid #000000;
				width: 12em;
				white-space: nowrap; 
				overflow: hidden; 
			}
		</style>
	</head>
	<body>
		<h3>下面两个div包含无法在框中容纳的长文本。正如您所见, 文本被修剪了。</h3>

		<p>这个div使用"text-overflow: ellipsis":</p>
		<div style="text-overflow: ellipsis;">This is some long text that will not fit in the box</div>

		<p>这个div使用"text-overflow: clip":</p>
		<div style="text-overflow: clip;">This is some long text that will not fit in the box</div>
	</body>
</html>

1.4.2. 效果图

2. text-shadow属性

2.1. text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表, 每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。

2.2. 规定水平阴影的位置、垂直阴影的位置、模糊距离, 以及阴影的颜色:

text-shadow: h-shadow v-shadow blur color;

2.3. 默认值

2.4. 可能值

2.5. 例子

2.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3文本阴影</title>
		<meta charset="utf-8" />
		<style type="text/css">
			span {
				font-size: 32px;
				text-shadow: 5px 5px 5px #FF0000;
			}
			p {
				font-size: 32px;
				text-shadow: 5px 5px 5px #FF0000, 5px 5px 5px #FFFF00;
			}
		</style>
	</head>
	<body>
		<span>一个文本阴影</span>
		<p>多个文本阴影</p>
	</body>
</html>

2.5.2. 效果图

3. word-wrap属性

3.1. word-wrap属性允许长单词或URL地址换行到下一行。

3.2. 默认值

3.3. 可能值

3.4. 例子

3.4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS3 自动换行</title>
		
		<style type="text/css">
			p {
				width: 11em; 
				border: 1px solid #000000;
			}
		</style>
	</head>
	<body>
		<p style="word-wrap: normal;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</p>
		<p style="word-wrap: break-word;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
	</body>
</html>

3.4.2. 效果图