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

<!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>

 效果图:

 

猜你喜欢

转载自onestopweb.iteye.com/blog/2262901