datatable行内内容太长，有时不自动换行解决方法

最新推荐文章于 2023-03-02 10:09:16 发布
最新推荐文章于 2023-03-02 10:09:16 发布
阅读量2k 收藏 2
点赞数
文章标签： javascript c# ViewUI
原文链接：http://www.cnblogs.com/yang-xiansen/p/10431711.html
版权
当datatable中的内容过长时不自动换行，可以通过添加CSS属性`word-wrap: break-word;`来解决。此外，可以使用`overflow:hidden; white-space:nowrap;`隐藏超出的内容，或者设置td宽度实现自动换行。
摘要由CSDN通过智能技术生成

加一个css属性即可

style = "word-wrap:break-word;"

js代码：

"render": function (data, type, full, meta) {
   
    return '<p style="word-wrap:break-word;">' + data + '</p>'
}

但有时word-wrap会失效，原因如下：

  1.word-wrap对行内元素是没有效果的

 
 



                

        

        




    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  weixin_30824599
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
DataTable实现行转换列

				
			

			

				

					Mo_莫库什勒
				

				

					11-05
					
					1900
					
				

			

		

		

			
				
数据库的查询结果通常为每一行为单独的信息，有时需要以某一列为基准（姓名），将某一列（科目）转换成行




         /// 
        /// 
        /// 
        /// 数据源
        /// 主键列
        /// 转换列
        /// 数值列
        /// 
        /// 
  

			
		

	



                

            
              



	

		

			

				
					
jquery.dataTables表格中的内容怎么设置让它不自动换行

				
			

			

				

					weixin_34407348的博客
				

				

					10-13
					
					2313
					
				

			

		

		

			
				
在table中增加 style="white-space: nowrap;" ，这样会撑大td。会出现滚动条。其他内容配置：每列宽度：

 "aoColumnDefs": [
	    	                  { "sWidth": "10%", "aTargets": [ 0 ] },
	    	                  { "sWidth": "12

			
		

	



              


  
              

                


	

		

			

				
					
浏览器系列：css+div如何解决文字溢出

				
			

			

				

					行成于思，形之于文
				

				

					02-21
					
					1161
					
				

			

		

		

			
				
看到标题你一定很轻易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为似乎还有很多人不记得碰到这样的情况该如何处理。
首先，先解释一下，一般用div+css的容器中文字超出长度会浮动到框外或者把框撑大，这个一般容易解决，但是我今天就遇到了这样的问题：在IE6下测试页面没反应，在IE8下测试页面却正常处理了溢出文字，我就郁闷了，这个溢出处理不是IE特有

			
		

	





	

		

			

				
					
dataTable列内容过长隐藏

				
			

			

				

					初阶农民工的博客
				

				

					09-22
					
					2809
					
				

			

		

		

			
				
需求：在dataTable的表格中，有时内容数据过长导致表格整体溢出界面。需要把过长的内容限定在一个范围。

法1：设置td的css样式（缺点是不能看到所有数据）：


td {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    max-width: 300px;//最大宽度
}

法2：给返回的数据做截取，同时所有数据显示在title属性中，如：


"columns": [
            {

			
		

	



		

			
		



	

		

			

				
					
比较2个datatable内容是否相同的方法

				
			

			

				

					09-04
				

			

		

		

			
				
如果遍历完整个表格都没有发现不相等的单元格，那么方法最后返回true，表示两个DataTable的内容完全相同。  这种方法适用于大多数情况，但要注意的是，它假设了两个DataTable的结构完全相同，即列的顺序、列名和数据...

			
		

	





	

		

			

				
					
C# datatable 不能通过已删除的行访问该行的信息处理方法

				
			

			

				

					01-01
				

			

		

		

			
				
原因如下： Delete()之后需要datatable.AccepteChanges()方法确认完全删除，因为Delete()只是将相应列的状态标志为删除， 还可以通过datatable.RejectChanges()回滚，使该行取消删除。 如果要彻底删除datarow，需要...

			
		

	





	

		

			

				
					
在DataTable中执行Select(条件)后，返回DataTable的方法

				
			

			

				

					01-02
				

			

		

		

			
				
网上看到一个解决方法，感觉不错： private DataTable GetNewDataTable(DataTable dt,string condition) { DataTable newdt = new DataTable(); newdt=dt.Clone(); DataRow[] dr = dt.Select(condition...

			
		

	





	

		

			

				
					
对Datatable中过长内容实行省略话

				
			

			

				

					weixin_30764137的博客
				

				

					01-08
					
					482
					
				

			

		

		

			
				
重点：  当数据长度大于20, 只展示前16个字符，后面的用...代替var table = $("#datatable-buttonss").DataTable({    "aaSorting": [[ 3, "asc" ]],    "search": "全文搜索",    "pageLength": 16,    // 每页展示数量    "lengthMenu": [16, 32, 48]...

			
		

	





	

		

			

				
					
antd table 表格中 英文字母不换行问题

				
			

			

				

					m0_57253767的博客
				

				

					12-23
					
					822
					
				

			

		

		

			
				
antd 中table中英文不换行问题

			
		

	





	

		

			

				
					
antd 使用table组件时表格内英文不换行问题

					
最新发布

				
			

			

				

					weixin_69903461的博客
				

				

					03-02
					
					361
					
				

			

		

		

			
				
const columns: ColumnsType<type> = [
  {
   title: 'xxxxxxxxxxx',
   key: 'xxx',
   render: (_text, record) => <span>{record.xxx}</span>,
  },
  {
   title: 'xxxxxxxxx',
   key: 'xxx',
   render: (_text, record)

			
		

	





	

		

			

				
					
datatable中行的移动，datatable中将一行的数据移动到另外一行，datatable交换数据

				
			

			

				

					Ai大模型，odoo，idempiere,metasfresh,低代码，ecshop数据采集发布接口，zencart，lightinthebox，shopex 数据采集接口
				

				

					09-25
					
					1958
					
				

			

		

		

			
				
这种方式也可以，但是不太完美
                                  DataRow dr = dt_hr.NewRow();
                                    for (int m = 0; m 
                                    {

			
		

	





	

		

			

				
					
黄聪：jquery+Datatables出现数据过长，表格不自动换行，columns设置width失效的办法...

				
			

			

				

					weixin_33936401的博客
				

				

					10-08
					
					1683
					
				

			

		

		

			
				
添加下面的CSS代码即可：

table.dataTable.nowrap th, table.dataTable.nowrap td{white-space: normal !important;}

 

			
		

	





	

		

			

				
					
[JavaScript实战]datatable解决td或tr样式问题,自定义datatable样式

				
			

			

				

					学生董格
				

				

					01-22
					
					7721
					
				

			

		

		

			
				
最近被datatable的一个项目困扰,很多类似datatable中要解决的样式问题,后来查了官方文档终于找到了解决办法



columns中有个data并列的属性className,可以定义单独页面用的class这就完美解决了



我用到的是自动换行的问题...

			
		

	





	

		

			

				
					
datatables修改显示样式(修改行、列背景色，字体，隔行换色)

				
			

			

				

					denglinglin2653的博客
				

				

					10-24
					
					1749
					
				

			

		

		

			
				
这里主要介绍两个函数：aoColumnDefs和createdRow
datatables的使用方式非常简单，自行查阅资料，直接上代码：
var t;t = $("#accountTbl").DataTable({    searching: true,    processing: true,    dom: "<'row'<'col-sm-12'tr>>\...

			
		

	





	

		

			

				
					
Jquery.Datatables td宽度太长的情况下，自动换行

				
			

			

				

					weixin_33949359的博客
				

				

					03-21
					
					1590
					
				

			

		

		

			
				
在 td 里面 加上 style="word-wrap:break-word;" 自动换行就好了，如果不想换行，可以将超出内容设为隐藏，
overflow:hidden; white-space:nowrap;
 
（1）超过宽度和高度文字会自动隐藏

&lt;div style="width:100px;height:25px;overflow-x:hidden;overflow-y:...

			
		

	





	

		

			

				
					
datatable内容过长时表格会超出界面

				
			

			

				

					buside的博客
				

				

					01-17
					
					5170
					
				

			

		

		

			
				
设置表格样式如下即可

table{table-layout:fixed;word-break:break-all;}

table-layout:设置表格的布局算法：

属性值

值
			描述
		automatic
			默认。列宽度由单元格内容设定。
		fixed
			列宽由表格宽度和列宽度设定。
		inherit
			规定应该从父元素继承 table-layout 属性的值。
	...

			
		

	





	

		

			

				
					
dataTable某列内容过长自动收缩

					
热门推荐

				
			

			

				

					daydayupzzc的专栏
				

				

					10-11
					
					2万+
					
				

			

		

		

			
				
实现功能：dataTable某列内容过长的话，只显示部分内容，鼠标点击显示全部，再点击显示部分。可以切换。


效果图：




鼠标点击：




如果再次点击，备注内容又收缩了。


JS实现代码如下：



var remarkShowLength = 10;//默认现实的字符串长度


datatable中的配置：

"createdRow

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值