CSS 3之文本样式（三）

最新推荐文章于 2022-10-19 15:01:19 发布

菇毒

最新推荐文章于 2022-10-19 15:01:19 发布

阅读量144

点赞数

分类专栏： web 前端学习 # CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125239448

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

文本样式（三）

1. 控制溢出文本
2. 控制换行
3. 字体复合属性
4. 文字修饰效果

1. 控制溢出文本

在网页显示信息时，若指定显示区域宽度，而显示的信息过长，其结果就是信息会撑破指定的信息区域，进而破坏整个网页布局；
若设定的显示区域过长，就会影响整体的网页显示；
使用 text-overflow属性能解决上述问题；
text-overflow属性用来定义文本溢出时显示省略标记，即定义省略文本的出来方式；
它不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需要定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果；
语法格式如下：

text-overflow:clip | ellipsis

20220501
例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制溢出文本</title>
		<style>
			.test_demo_clip{text-overflow: clip;overflow: hidden;white-space: nowrap;width: 150px;background: #ccc;}
			.test_demo_ellipsis{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 150px;background-color: #ccc;}
		</style>
	</head>
	<body>
		<h2>text-overflow:clip</h2>
		<div class="test_demo_clip">文字的半截效果：查看第一种效果</div>
		<h2>text-overflow"ellipsis</h2>
		<div class="test_demo_ellipsis">显示省略号的效果：查看第二种效果</div>
	</body>
</html>

20220501

2. 控制换行

当在一个指定区域显示一整行文字时，若文字在一行显示不完时，就需要换行；
若不进行换行，则会超出指定区域范围，此时我们可用 wold-wrap 文本样式来控制文本换行；
语法格式如下

word-wrap:normal | break-word

20220501 例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制换行</title>
		<style type="text/css">
			div{width: 300px;word-wrap: break-word;border: 1px solid #999999;}
		</style>
	</head>
	<body>
		<div>HTML+CSS HTML+CSSHTML+CSSHTML+CSSHTML+CSSHTML+CSSHTML+CSSHTML+CSSHTML+CSSHTML+CSSHTML+CSS</div><br />
		<div>举头望明月：举头望明月：举头望明月：举头望明月：举头望明月：举头望明月：举头望明月：举头望明月：</div><br />
		<div>I am Teacher!I am Teacher!I am Teacher!I am Teacher!I am Teacher!I am Teacher!I am Teacher!</div>
	</body>
</html>

20220501 word-wrap 属性能控制换行，当属性取值 break-word时将强制换行，中文、英文字体都没有任何问题；
但对于长串的英文就不起作用，break-word属性用于控制师傅断词，而不是断字符；

3. 字体复合属性

在网页设计时，为了让网页布局合理且文本规范，对字体设计需要使用多种属性，但多个属性分别书写相对比较麻烦；
可利用 font 属性来解决这一问题；
font 属性能一次性地使用多个属性的属性值定义文本字体；
语法格式如下：

{font:font-style font-variant font-weight font-size font-family}

font 属性中的手续排列顺序是 font-style、font-variant、font-weight、font-size、font-family，各属性值之间用空格隔开；
但，若font-family属性要定义多个属性值，则需要使用逗号（,）隔开；
属性排列中，font-style、font-variant、font-weight这3个属性值是能只是有调换的，而font-size与font-family则必须按固定的顺序出现在 font 属性中；若这两者的顺序不对，或缺少一个，整条样式规则可能会被忽略；
例子 3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体复合属性</title>
		<style>
			p{font: normal small-caps bolder 30pt "Cambria","Times New Roman",华文彩云;}
		</style>
	</head>
	<body>
		<p>
			葡萄美酒夜光杯，欲饮琵琶马上催。
			醉卧沙场君莫笑，古来征战几人回。
		</p>
	</body>
</html>

20220501

4. 文字修饰效果

text-decoration 属性是文本修饰属性，该属性能为页面提供多种文本的修饰效果；
语法格式如下：

txt-decoration:none || underline || blink || overline || line-through

20220501
例子4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字修饰效果</title>
	</head>
	<body>
		<p style="text-decoration: none;">终南望余雪</p>
		<p style="text-decoration: underline;">终南阴岭秀</p>
		<p style="text-decoration: overline;">积雪浮云端</p>
		<p style="text-decoration: line-through;">林表明霁色</p>
		<p style="text-decoration: blink;">林中增慕寒</p>
	</body>
</html>

20220501

菇毒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
CSS 3之文本样式（三）

在网页显示信息时，若指定显示区域宽度，而显示的信息过长，其结果就是信息会撑破指定的信息区域，进而破坏整个网页布局；若设定的显示区域过长，就会影响整体的网页显示；使用属性能解决上述问题；属性用来定义文本溢出时显示省略标记，即定义省略文本的出来方式；它不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需要定义强制文本在一行内显示（）及溢出内容为隐藏（），只有这样才能实现溢出文本显示省略号的效果；语法格式如下：例子 1：当在一个指定区域显示一整行文字时，若文字在一行显示不完时，就需要换行；
复制链接

扫一扫