怎么给文本添加下划线？

本文介绍html中给文字添加下划线和word文档下给字加下划线的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

HTML页面中给文本添加下划线的两种方法

1、使用HTML 标签添加下划线

在HTML中可以使用标签定义下划线文本，即为文本添加下划线。【推荐：html文档】

下划线标签告诉浏览器把加入到u标签的文本加下划线样式呈现显示给浏览者。对于所有浏览器来说，这意味着要把这段文字加下划线样式方式呈现给大家显示。

语法：

<u>我被加下划线了</u>

说明： 标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html下划线标签实例</title>
	</head>

	<body>
		测试文本！<u>加了下划线的文本</u> ！
	</body>
</html>

效果图：

1.jpg-600

2、使用CSS text-decoration属性或者border-bottom属性添加下划线

方法1：使用text-decoration:underline;添加下划线

CSS的text-decoration属性用于指定添加到文本的修饰，其underline属性值可以定义文本下的一条线。【相关推荐：css在线手册】

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 文字下划线样式</title>
		<style>
			.demo span{
				text-decoration:underline;
			}
		</style>
	</head>
	<body>
		<p class="demo">这是一段测试文字，<span>加了下划线的文本</span>！</p>
	</body>
</html>

效果图：

2.jpg-600

方法2：使用border-bottom属性添加下划线

CSS的border-bottom属性可以设置元素下边框样式，这样就可以在文字下添加一条线。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css 文字下划线样式</title>
		<style>
			.demo1 span{
				border-bottom: 1px solid #000000;
			}
			.demo2 span{
				border-bottom: 5px solid #0081EF;
			}
			.demo3 span{
				border-bottom: 2px dashed #000000;
			}
			.demo4 span{
				border-bottom: 2px dotted #000000;
			}
			.demo5 span{
				border-bottom: 5px double #000000;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p class="demo1">这是第1段测试文字，<span>加了下划线的文本</span>！</p>
			<p class="demo2">这是第2段测试文字，<span>加了下划线的文本</span>！</p>
			<p class="demo3">这是第3段测试文字，<span>加了下划线的文本</span>！</p>
			<p class="demo4">这是第4段测试文字，<span>加了下划线的文本</span>！</p>
			<p class="demo5">这是第5段测试文字，<span>加了下划线的文本</span>！</p>
		</div>
	</body>
</html>

效果图：

3.jpg-600