您的位置：首页 > Web前端 > CSS

CSS强制英文、中文换行与不换行 强制英文换行-样式在线生成-样式在线调试

2015-08-27 10:06 676 查看 
<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 Transitio
abc0
nal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head><title>自适应高度 站长学院www.pigzz.com</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;
}



样式在线生成：http://www.cssmatic.com/box-shadow

样式在线调试：http://jsfiddle.net/nimbu/fbw2q/
 https://codepen.io/pen/ 

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航