前端大本营

HTML5,CSS3,Responsive,资料站

text-shadow 说明

text-shadow属性, 为文字追加阴影 。<向文本设置阴影。>

属性值

none 不为文本追加阴影。(默认值) h-shadow 阴影水平方向的距离 <必需。水平阴影的位置。允许负值。> v-shadow 阴影垂直方向的距离 <必需。垂直阴影的位置。允许负值。> blur 阴影渐变半径 <可选。模糊的距离。> color 阴影的颜色 <可选。阴影的颜色。> 以上的属性可以作为一个数组,复数阴影设置的时候,可以以 , 来区分。 如果想给元素div追加阴影的场合,请参考 box-shadow
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style>
h1.sample1 {text-shadow: 5px 5px 2px blue;}
h1.sample2 {text-shadow: 5px 5px 2px blue , -5px -5px 1px red;}
</style>

</head>

<body>
<h1 class="sample1">text-shadow例1</h1>
<h1 class="sample2">text-shadow例2</h1>	
</body>
</html>
实例图  text-shadow
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 文本单元 | text-shadow 为文字追加阴影 —— CSS3 参考 文本单元已关闭评论

text-wrap 说明

text-wrap 属性, 指定文本换行的方法 。<规定文本的换行(折行)规则。>

属性值

normal 按照换行规则进行换行。(默认值)<只在允许的换行点进行换行。> none 不换行,超过div元素边框时,会溢出<不换行。元素无法容纳的文本会溢出。> unrestricted 在一行的两个文字元素间任意换行。<在任意两个字符间换行。> suppress 在没有其他合理的换行位置的时候,使用该换行。<压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> text-wrap </title>
<style>
p.sample1 , p.sample2 , p.sample3 , p.sample4 {
width:40px; margin-right:50px; background-color:yellow;
float:left;
}
p.sample1 {text-wrap:normal;}
p.sample2 {text-wrap:none;}
p.sample3 {text-wrap:unrestricted;}
p.sample4 {text-wrap:suppress;}

div.sample0 {clear:both;}
</style>

</head>

<body>
<div class="sample0">从左开始指定 normal、none、unrestricted、suppress</div>

<p class="sample1">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>
<p class="sample2">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>
<p class="sample3">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>
<p class="sample4">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>

<div class="sample0">从左开始指定 normal、keep-all、loose、break-strict、break-all を指定</div>

<p class="sample1">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample2">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample3">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample4">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>

<div class="sample0">从左开始指定 normal、none、unrestricted、suppress</div>
</body>
</html>
实例图  text-wrap
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 文本单元 | text-wrap 指定文本换行的方法 —— CSS3 参考 文本单元已关闭评论

word-break 说明

word-break 属性, 指定行的换行方式 。<规定自动换行的处理方法。> ※CJK 中日韩统一表意文字(CJK Unified Ideographs),目的是要把分别来自中文、日文、韩文、越文中,本质、意义相同、形状一样或稍异的表意文字(主要为汉字,但也有仿汉字如日本国字、韩国独有汉字、越南的喃字)于ISO 10646及Unicode标准内赋予相同编码。CJK 是中文(Chinese)、日文(Japanese)、韩文(Korean)三国文字的缩写。顾名思义,它能够支持这三种文字。实际上,CJK 能够支持在 LaTeX 中使用包括中文、日文、韩文在内的多种亚洲双字节文字。

属性值

normal CJK 严格执行换行,非CJK根据自身的规定进行换行(默认值)<使用浏览器默认的换行规则。> keep-all CJK不进行换行,非CJK状态同normal <只能在半角空格或连字符处换行。> loose CJK换行比normal要求的弱, 非CJK状态同normal break-strict CJK的状态同normal相同,非CJK什么情况下都可以换行 break-all CJK的状态同loose相同,非CJK的状态与break-strict相同 <允许在单词内换行。>
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> word-break </title>
<style>
p.sample1 , p.sample2 , p.sample3 , p.sample4 , p.sample5 {
width:40px; margin-right:50px; background-color:yellow;
float:left;
}
p.sample1 {word-break:normal;}
p.sample2 {word-break:keep-all;}
p.sample3 {word-break:loose;}
p.sample4 {word-break:break-strict;}
p.sample5 {word-break:break-all;}

div.sample0 {clear:both;}
</style>

</head>

<body>
<div class="sample0">从左开始指定 normal、keep-all、loose、break-strict、break-all</div>

<p class="sample1">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>
<p class="sample2">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>
<p class="sample3">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>
<p class="sample4">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>
<p class="sample5">床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>

<div class="sample0">从左开始指定 normal、keep-all、loose、break-strict、break-all を指定</div>

<p class="sample1">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample2">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample3">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample4">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>
<p class="sample5">I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by their character.</p>

<div class="sample0">从左开始指定 normal、keep-all、loose、break-strict、break-all</div>
</body>
</html>
实例图 word-break
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 文本单元 | word-break 指定行的换行方式 —— CSS3 参考 文本单元已关闭评论