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

最新推荐文章于 2023-06-22 00:52:03 发布
最新推荐文章于 2023-06-22 00:52:03 发布
阅读量620 收藏
点赞数
分类专栏： JAVA WEB 文章标签： css js 字符换行 
<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" "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/

                

        

        

    




    

      

        

            

              
                
                  lixingshi
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
01-CSS3基础

				
			

			

				

					人俗话不多
				

				

					03-06
					
					1196
					
				

			

		

		

			
				
CSS简介


HTML 主要做结构, 显示元素内容


css 是层叠样式表 主要做样式,用来美化 HTML ,布局网页


CSS 语法规范


css规则主要有两个盒子模型主要部分构成: 选择器以及一条或多条声明.


属性和属性值以键值对的形式出现


属性和属性值之间用 “:” 分开


多个键值对中间用";" 进行区分



代码规范


空格规范:


    p {
        color: #ff0000;
        font-size: 30px;
    }


属性值前面 

			
		

	



                

              
                



	

		

			

				
					
前端HTML与CSS入门-一份媲美黑马培训班2万学费的知识干货

				
			

			

				

					前端从0到100000
				

				

					08-15
					
					691
					
				

			

		

		

			
				
前端HTML与CSS入门-一份媲美黑马培训班2万学费的知识干货

**1. HTML部分
2. CSS部分**

什么是HTML?
一:Html学习开始之前的知识铺垫:
初识HTML
    HTML的定义
    何为"超文本"
    何为"标签"
         标签的并列与嵌套
         单标签与双标签
    何为"元素"
    	元素的属性与键值对

初识浏览器
前端开发常见的浏览器
浏览器的内核
网页与网站
字符编码
从写代码到浏览器展示页面之间,到底发生了什么?
第一步:将你写的

			
		

	



                


  
              

                


	

		

			

				
					
css 英文换行 css(word-wrap/break)使纯英文数字自动换行

				
			

			

				

					12-13
				

			

		

		

			
				
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在IE和FF中都会撑大容器，不会自动换行并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决？先来认识一下两位主角word-wrap和word-break 
word-wrap用来控制换行 两种取值： (1)normal (2)break-word（此值用来强制换行，内容将在边界内换行，中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。） 
word-break用来控制断词 三种取值： (1)normal (2)break-all（是断开单词。在单词到边界时，下个字母自动到下一

			
		

	





	

		

			

				
					
使用css让英文文本自动换行

				
			

			

				

					Final Fantasy Technology Field
				

				

					05-30
					
					3071
					
				

			

		

		

			
				
本文介绍如何使用css让英文文本自动换行，大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们自动换行的方法！　　大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是CSS如何将他们自动换行的方法！对于Div和table以及不同的浏览器，实现css自动换行的方法都稍有不同，下面分别介绍：对于div　　1.（IE浏览器

			
		

	



		

			
		



	

		

			

				
					
css自动换行

				
			

			

				

					管子（zero）的杂乱空间
				

				

					11-13
					
					2095
					
				

			

		

		

			
				
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="

			
		

	





	

		

			

				
					
前端学习笔记 - HTML+CSS

				
			

			

				

					fengxm0309的博客
				

				

					10-07
					
					4695
					
				

			

		

		

			
				
基础认知

网页

什么是网页


	网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。
	
	
	网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。
	
	
	网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。
	
什么是 HTML


	HTML 指的是超文本标记语言 (Hyper Text Markup Lang

			
		

	





	

		

			

				
					
HTML 与 CSS

				
			

			

				

					LemonStars的博客
				

				

					07-13
					
					726
					
				

			

		

		

			
				
新手所学基础：html与css样式

			
		

	





	

		

			

				
					
html 和 css 代码 总结

				
			

			

				

					m0_55170432的博客
				

				

					04-13
					
					1378
					
				

			

		

		

			
				
标题



			
		

	





	

		

			

				
					
CSS实现连续数字和英文的自动换行的方法

				
			

			

				

					12-30
				

			

		

		

			
				
对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行： 
html 
<div id=wrap>正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div> css#wrap{white-space:normal; width:200px; } 
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all;

			
		

	





	

		

			

				
					
Css 强制英文自动换行以及word-wrap、word-break、white-space、overflow的用法

				
			

			

				

					colin5210的博客
				

				

					06-22
					
					7482
					
				

			

		

		

			
				
1、Css强制英文或数字自动换行
2、让中文按关键词或标签换行
3、Css强制中文不自动换行
4、Css强制中文不自动换行并自动隐藏；
5、Css中英文或数字的超出部分自动省略号…；
6、Css中word-wrap、word-break、white-space、overflow、text-overflow的用法讲解；

			
		

	





	

		

			

				
					
CSS解决英文自动换行问题

				
			

			

				

					michaelia530的专栏
				

				

					06-28
					
					4976
					
				

			

		

		

			
				
当容器内出现长串英文时，容器会被撑大，此时内容不会自动换行，那么如何用css来解决英文自动换行问题呢？请往下阅读：

如果是在Table内出现此问题，可以在table标签中加入 style="WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;"问题会得到解决。
那么，word-wrap同word-break的区别又是

			
		

	





	

		

			

				
					
单词自动换行 css,CSS让英文单词的自动换行的方法介绍

				
			

			

				

					weixin_34837898的博客
				

				

					08-03
					
					6420
					
				

			

		

		

			
				
CSS让英文单词的自动换行在制作网页过程中，css样式编写中，可能会遇到文字换行的问题，其中英文换行可能会困扰着很多初学者，而今天我就这个问题进行相应的阐述，学过css的朋友应该都知道，控制文字是否换行可以直接使用css中的word-break来进行调整，但是对于英文来说，我们要让其能满足所有浏览器的需要，仅仅这一个属性是不够的。根据我个人所了解的一些资料显示，英文过多，过长，不仅仅影响到表格，还...

			
		

	





	

		

			

				
					
CSS中英文换行

				
			

			

				

					sunluyi的博客
				

				

					06-29
					
					2578
					
				

			

		

		

			
				
中英文自动换行

word-break:break-all;只对英文起作用，以字母作为换行依据
word-wrap:break-word; 只对英文起作用，以单词作为换行依据
white-space:pre-wrap; 只对中文起作用，强制换行
white-space:nowrap; 强制不换行，都起作用
p{
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}
//不换行
.wrap {
  white-s.

			
		

	





	

		

			

				
					
纯英文换行的css,利用CSS实现纯英文数字自动换行

				
			

			

				

					weixin_34632959的博客
				

				

					08-04
					
					574
					
				

			

		

		

			
				
下面为大家带来一篇CSS代码使纯英文数字自动换行的简单实现。内容挺不错的，现在就分享给大家，也给大家做个参考。当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在IE和FF中都会撑大容器，不会自动换行并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决？先来认识一下两位主角word-wrap和word-breakword-wrap用来控制css换行...

			
		

	





	

		

			

				
					
css代码 字母自动换行,div 实现长英文字母自动换行CSS

				
			

			

				

					weixin_35868872的博客
				

				

					08-03
					
					484
					
				

			

		

		

			
				
自动换行疑问,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的要领最佳CSS定义换行代码.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }这里 overflow:hidden;或者 auto；=============================...

			
		

	





	

		

			

				
					
CSS学习------强制换行与不换行

					
最新发布

				
			

			

				

					08-11
				

			

		

		

			
				
CSS中，可以使用`white-space`属性来控制文本的换行方式。

如果要强制换行，可以将`white-space`属性设置为`normal`或者`pre-wrap`。`normal`会根据容器的宽度自动换行，而`pre-wrap`会保留原始的换行符，并在需要时进行换行。

示例代码如下：

```css
p {
  white-space: normal;
}
```

如果不希望文本换行，可以将`white-space`属性设置为`nowrap`。这样文本将在一行内显示，超出容器的部分会被隐藏。

示例代码如下：

```css
p {
  white-space: nowrap;
}
```

希望能对你的学习有所帮助！如果还有其他问题，请继续提问。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值