textarea标签IE浏览器下内容不换行

最新推荐文章于 2022-11-09 22:49:01 发布
最新推荐文章于 2022-11-09 22:49:01 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 项目经验汇总 文章标签： 前端 textarea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41573640/article/details/88692755
版权

最近在用<textarea></textarea> 标签时发现一个问题，在ie和谷歌浏览器上展示的效果不同，如图：

谷歌：

 

IE 浏览器上显示效果
 

 

把谷歌上的所有样式复制到标签上，在IIE下调节，一一过滤，发现IE下缺少这个属性
 

textarea {
    white-space: pre-wrap;//textarea标签内容自动换行
    height: 60px;
}
 

 添加上这个属性后，IE展示也正常了，如图
 

 

原理是浏览器不同内核，初始页面标签的样式不同~ 

                

        

        

    




    

      

        

            

              
                
                  高彩琼
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
关于textarea提交的内容无法换行的解决办法

				
			

			

				

					09-05
				

			

		

		

			
				
本篇文章小编为大家介绍，关于textarea提交的内容无法换行的解决办法，有需要的朋友可以参考一下

			
		

	



                

              
                



	

		

			

				
					
textarea 在IE和FF下换行无法正常显示的解决方法

				
			

			

				

					10-28
				

			

		

		

			
				
今天在做项目时用到textarea 用户输入信息后显示不换行在IE下测试成功在FF没反应

			
		

	



                


  
              

                


	

		

			

				
					
textarea不需要换行

				
			

			

				

					aolangtb243484的博客
				

				

					10-05
					
					256
					
				

			

		

		

			
				
textarea显示文本时，如果将标签换行，显示内容会变乱，将标签写成一行显示内容为正常。

转载于:https://www.cnblogs.com/BruceLeey/archive/2009/09/04/1560176.html...

			
		

	





	

		

			

				
					
ie浏览器中 textarea 不能自动换行

				
			

			

				

					weixin_39755019的博客
				

				

					05-23
					
					1861
					
				

			

		

		

			
				
由于在谷歌浏览器自动换行没有问题，我们可以在ie控制台和谷歌控制台比较一下各自的属性，发下ie缺少了


white-space:pre-wrap;

在style里加上后发现ie也可以自动换行了
...

			
		

	



		

			
		



	

		

			

				
					
Pyqt5 控件textBrowser设置不做换行处理

				
			

			

				

					Android__An的博客
				

				

					11-09
					
					819
					
				

			

		

		

			
				
给这个控件设置下面方法，然后添加内容textBrowser不换行。

			
		

	





	

		

			

				
					
浏览器 过长文本 不换行 BUG

				
			

			

				

					weixin_30621711的博客
				

				

					10-19
					
					258
					
				

			

		

		

			
				
浏览器把过长无空格文本作为一个单词来看待，所以不会换行，解决方法：word-break: break-all /*IE chorm*/ 火狐暂不支持，用hidden基本保证效果吧
转载于:https://www.cnblogs.com/yuchav/archive/2011/10/19/2217603.html...

			
		

	





	

		

			

				
					
IE下textarea默认不显示滚动条的实现代码

				
			

			

				

					01-21
				

			

		

		

			
				
IE下textarea默认情况下会显示出竖直方向的滚动条：  复制代码代码如下: <textarea style=”height:100px;”></textarea>   如果需要隐藏滚动条，行数超过height时才显示出滚动条，需要把overflow设置...

			
		

	





	

		

			

				
					
IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法

				
			

			

				

					10-16
				

			

		

		

			
				
总之，解决IE浏览器下JS脚本提交表单后不能自动提示的问题，需要理解浏览器特性的差异，并结合JavaScript事件处理来实现。通过合理配置浏览器设置和编写适当的JavaScript代码，可以确保用户在使用表单时获得更好的...

			
		

	





	

		

			

				
					
IE修炼之路：IE11 textarea无法正常换行

				
			

			

				

					m0_37613019的博客
				

				

					01-19
					
					532
					
				

			

		

		

			
				
1. 问题描述
在回显数据的时候，发现IE11 textarea中的数据呈一行显示，无法换行。
2. 问题解决
添加如下css属性即可解决：
textarea{
white-space:pre-wrap; /* css3.0 /
white-space:-moz-pre-wrap; / Firefox /
white-space:-o-pre-wrap; / Opera 7 /
word-wrap:break-word; / Internet Explorer 5.5+ */
}
参考资料
怎么解决IE11

			
		

	





	

		

			

				
					
网页中文本框显示不换行

				
			

			

				

					LBikang的博客
				

				

					10-18
					
					974
					
				

			

		

		

			
				
p{
width:100px;
border:1px solid red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}

  ansjsijjsdgfhtfgdsjsjisjisjsi

			
		

	





	

		

			

				
					
textarea 自适应大小 兼容Chrome ie等浏览器

				
			

			

				

					04-08
				

			

		

		

			
				
textarea 自适应大小 兼容Chrome ie等浏览器，自动调整大小

			
		

	





	

		

			

				
					
强制换行/不换行 （兼容IE）

				
			

			

				

					weixin_30845171的博客
				

				

					07-10
					
					945
					
				

			

		

		

			
				
word-break:break-all;

转载于:https://www.cnblogs.com/listen9436/p/11165766.html

			
		

	





	

		

			

				
					
CSS -  如何实现强制不换行、自动换行、强制换行  以及 chrom默认焦点 IE下 Input 默认出现叉...

				
			

			

				

					weixin_30628077的博客
				

				

					10-16
					
					281
					
				

			

		

		

			
				
*:focus {outline: none;} 
input::-ms-clear {display:none;}


一般的文字截断（适用于内联与块）：
.text-overflow {
   display:block;/*内联对象需加*/
   width:31em;/*指定宽度*/
   word-break:keep-all;/* 不换行 */
   white-space:nowra...

			
		

	





	

		

			

				
					
textarea在IE浏览器下只显示一行

				
			

			

				

					tianye776699的博客
				

				

					11-01
					
					1461
					
				

			

		

		

			
				

最近在写项目时，发现textarea在IE下只显示一行，这个问题纠结了好久，也在百度好久，都说这个问题是IE的一个BUG，在别的浏览器上都没有，只在IE下有这个问题
在网上找了许多办法
1.内容
这种方法如果超出两行，就会生成滚动条，也可以比较方便的查看，但是这种样式比较丑，我是果断放弃，和项目整体风格差别较大，大家可以试一下。
2.我们都知道，html一般是先加载页面，后执行赋值的INI文件，...

			
		

	





	

		

			

				
					
textarea标签的换行问题，以及兼容IE8

				
			

			

				

					PhperX的博客
				

				

					10-22
					
					498
					
				

			

		

		

			
				
textarea标签
针对enter键换行，以及IE8兼容等问题
IE9、FF、chrome： \n  ；
IE8： \r\n ；
g：表示全局，也就是变量mark的全部信息
var mark = $.trim($("#editMark").val());
var newMark = mark.replace(/\r\n/g,";");
var newMark = mark.replace(/\n...

			
		

	





	

		

			

				
					
解决textarea在ie浏览器下宽度溢出的问题

				
			

			

				

					无止境学的博客
				

				

					12-02
					
					369
					
				

			

		

		

			
				
解决textarea在ie浏览器下宽度溢出的问题的方法是：
给textarea元素定义宽度，并且padding,margin,border都是0,而不是使用 textarea 元素的 rows和cols属性。



			
		

	





	

		

			

				
					
解决textarea在IE下的bug

				
			

			

				

					siyi_blog的博客
				

				

					04-03
					
					1504
					
				

			

		

		

			
				
首先展示demo:



这是一个采用div模拟输入框的形式，主要用属性contenteditable，这个属性几乎兼容所有浏览器。实现方式是给一个固定高度，超出这个高度再显示滚动条。


<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text...

			
		

	





	

		

			

				
					
textarea中的默认内容强制换行显示

				
			

			

				

					MrLiber的博客
				

				

					07-07
					
					1562
					
				

			

		

		

			
				
遇到这样的场景，需要将textarea内容设置为换行显示，如下图：

我们知道 html中换行用<br/>
windows转译符换行常用\r \n（\n 是换行，\r是回车）
然而这些并不起作用。
现实中textarea并不支持html标签，textarea中使用以上的换行方法均会以原样输出，输入w3school.com.cn提供的%OD%OA方法也不行。
后来找到一个有效的方法，要用&#10;才可以有效实现强制换行，在此记录下来。

...

			
		

	





	

		

			

				
					
统一textarea在IE、Firefox下的效果

				
			

			

				

					ligenyingsr的专栏
				

				

					01-12
					
					1237
					
				

			

		

		

			
				
<br /> <br />本文来自：http://blog.c1gstudio.com/archives/57<br /> <br />textarea在IE是默认有滚动条的，而FF没有滚动条的。<br />解决方法:<br />1、用textarea的宽度（widht）和高度（height）来定义textarea的大小；<br />2、让滚动条自适应：overflow-y:auto。<br />3、使用js来自适应高度<styletype="text/css">        #content {    

			
		

	





	

		

			

				
					
html中td标签根据textarea输入内容换行

					
最新发布

				
			

			

				

					07-22
				

			

		

		

			
				
`样式属性来实现`<td>`标签中的内容根据`<textarea>`输入的内容换行。  HTML代码示例： ```html <!DOCTYPE html>    td {  white-space: pre-wrap; }         <td><textarea id="myTextarea" rows="4" cols="50" on...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
高彩琼

			
你的鼓励是我创作得最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值