第42文章文字阴影与自动换行

最新推荐文章于 2024-09-21 14:09:22 发布

iteye_17658

最新推荐文章于 2024-09-21 14:09:22 发布

阅读量102

点赞数

分类专栏：阅-H52 文章标签： html5 css3 文字阴影自动换行

阅-H52 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字阴影text-shadow</title>
<style>
h1{ text-shadow: 15px 15px 5px #000 , 30px 30px 5px #f60 , 45px 45px 5px green;}
</style>
</head>
<body>
<h1>文字阴影text-shadow</h1>
</body>
</html>

效果图：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>浏览器文本自动换行</title>
<style>
/*
word-break 属性规定自动换行的处理方法。
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
*/
p{ word-break:break-all;}
</style>
</head>
<body>
<h1>浏览器文本自动换行</h1>
<p>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容 ）。</p>
<p>2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。</p>
</body>
</html>

效果图：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>长单词与URL地址自动换行</title>
<style>
/*
word-wrap 属性允许长单词或 URL 地址换行到下一行。
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。
*/
p{ word-wrap:break-word;}
</style>
</head>

<body>
<h1>长单词与URL地址自动换行</h1>
<p>http://localhost:63342/%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1%E4%B8%8E%E8%87%AA%E5%8A%A8%E6%8D%A2%E8%A1%8C/index2.html</p>
</body>
</html>

效果图：