<pre name="code" class="css">
1. word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）
<strong>代码：</strong>
.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现*/
<p>注意，一定要指定容器的宽度，不然的话是没有用的。</p><p>注意word-break 是IE5+专有属性</p><p>语法：</p><p>word-break : normal | break-all | keep-all</p><p>参数：</p><p>normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行</p><p>break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本</p><p>keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本</p><p>说明：</p><p>设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。</p><p>对于中文，应该使用break-all 。</p><p></p><p></p><pre class="reply-text mb10" id="content-927830190" name="code" style="white-space: pre-wrap; word-wrap: break-word;">注意，兼容火狐浏览器强制英文换行：
<div style="word-wrap:break-word; white-space:normal; word-break:break-all; width:150px;">英文内容</div>
文字显示带省略号：
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;-icab-text-overflow: ellipsis;-khtml-text-overflow: ellipsis;-moz-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;
背景透明：
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
一个朦层效果：
.hd_fxright
{
width: 100%;height: 100%;overflow: hidden;bottom: 0;left:0;top:0;right:0;
text-align:right;position: fixed;z-index: 999999;background: #732929 none no-repeat scroll 0% 0%;
opacity: 0.8;filter:alpha(opacity=50);
}
DIV挺好的适应高度：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head><title>自适应高度 站长学院</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:10px;}
#ididid{background:#0066cc;}
</style>
</head>
<body>
<div id="ididid"></div>
<script type="text/javascript">
function autoHeight(){
if (window.innerHeight){//FF
nowHeight = window.innerHeight;
}else{
nowHeight = document.documentElement.clientHeight;
}
var jianHeight = 60;
if(nowHeight > jianHeight){
document.getElementById('ididid').style.height = nowHeight - jianHeight + 'px';
}else{
document.getElementById('ididid').style.height = jianHeight + 'px';
}
}
autoHeight();
window.onresize = autoHeight;
</script>
</body>
</html>
CSS按钮效果：发光效果：
<pre name="code" class="css"><style type="text/css">.css_btn_class {font-size:17px;font-family:Arial;font-weight:normal;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #dcdcdc;padding:8px 24px;text-decoration:none;background:-webkit-gradient( linear, left top, left bottom, color-stop(36%, #f9f9f9), color-stop(69%, #e9e9e9) );background:-moz-linear-gradient( center top, #f9f9f9 36%, #e9e9e9 69% );background:-ms-linear-gradient( top, #f9f9f9 36%, #e9e9e9 69% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9');background-color:#f9f9f9;color:#666666;display:inline-block;text-shadow:1px 1px 0px #ffffff;-webkit-box-shadow: 0px 0px 14px 6px #ffffff;-moz-box-shadow: 0px 0px 14px 6px #ffffff;box-shadow: 0px 0px 14px 6px #ffffff;}.css_btn_class:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(36%, #e9e9e9), color-stop(69%, #f9f9f9) );background:-moz-linear-gradient( center top, #e9e9e9 36%, #f9f9f9 69% );background:-ms-linear-gradient( top, #e9e9e9 36%, #f9f9f9 69% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9');background-color:#e9e9e9;}.css_btn_class:active {position:relative;top:1px;}
样式在线生成：/box-shadow
样式在线调试：/nimbu/fbw2q/
https://codepen.io/pen/
