1.<br />
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML换行显示的方式(<br />)</title> </head> <body> <p> 暴力真的可以解决一切,<br />帅真的可以当饭吃,<br />有钱真的可以为所欲为。 </p> </body> </html>
2.white-space: pre-line;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML换行显示的方式(white-space: pre-line;)</title> </head> <body> <p style="white-space: pre-line;"> 暴力真的可以解决一切, 帅真的可以当饭吃, 有钱真的可以为所欲为。 </p> </body> </html>
3.white-space: pre;
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML换行显示的方式(white-space: pre;)</title> </head> <body> <p style="white-space: pre;">暴力真的可以解决一切, 帅真的可以当饭吃, 有钱真的可以为所欲为。</p> </body> </html>
4.<pre></pre>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML换行显示的方式(<pre></pre>)</title> </head> <style> pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; *word-wrap: break-word; *white-space: normal; font-family: inherit } </style> <body> <pre>暴力真的可以解决一切, 帅真的可以当饭吃, 有钱真的可以为所欲为。</pre> </body> </html>
5.<textarea></textarea>标签的占位符placeholder属性换行
换行 (
) 空格 ( ) Tab (	) 回车 (
)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML换行显示(placeholder)</title> </head> <body> <textarea rows="5" cols="40" placeholder="暴力真的可以解决一切, 帅真的可以当饭吃, 有钱真的可以为所欲为。"></textarea> <textarea rows="5" cols="40" placeholder="暴力真的可以解决一切,
帅真的可以当饭吃,
有钱真的可以为所欲为。"></textarea> <textarea rows="5" cols="40" placeholder="暴力真的可以解决一切,
帅真的可以当饭吃,
有钱真的可以为所欲为。"></textarea> </body> </html>
6.<a></a>标签的提示内容title属性换行
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML换行显示(title)</title> </head> <body> <a title="暴力真的可以解决一切, 帅真的可以当饭吃, 有钱真的可以为所欲为。">鼠标悬停提示消息</a> </body> </html>