layui静态表格数字内容不自动换行解决方案

话不多说，上效果：

我使用Layui静态表格做东西，使用的layui表格是：

这个行边框表格

配上layui静态文件后直接粘贴代码就能使用

<table class="layui-table" lay-skin="line"><colgroup><col width="150"><col width="150"><col width="200"><col></colgroup><thead><tr><th>人物</th><th>民族</th><th>出场时间</th><th>格言</th></tr> </thead><tbody><tr><td>贤心</td><td>汉族</td><td>1989-10-14</td><td>人生似修行</td></tr><tr><td>张爱玲</td><td>汉族</td><td>1920-09-30</td><td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td></tr><tr><td>Helen Keller</td><td>拉丁美裔</td><td>1880-06-27</td><td> Life is either a daring adventure or nothing.</td></tr><tr><td>岳飞</td><td>汉族</td><td>1103-北宋崇宁二年</td><td>教科书再滥改，也抹不去“民族英雄”的事实</td></tr><tr><td>孟子</td><td>华夏族（汉族）</td><td>公元前-372年</td><td>猿强，则国强。国强，则猿更强！ </td></tr></tbody>
</table>

我添加进去后修改为我需要的后，发现出现了小问题：

红色框住部分本来是三列内容，后来第一列内容太多占了后面的位置，我把内容改为中文就能自动换行。

于是肯定Layui的静态表格对于数字字符是不自动换行的

查找资料发现在内容的td上添加css样式

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

即可自动换行

效果：

layui静态表格数字内容不自动换行解决方案相关推荐

净化网络环境！可信数字内容版权服务解决方案发布
数字时代来临,但盗版的毒瘤深埋其中,全球网络盗版造成的损失也在逐年增加.据行业分析报告研究表明,网络盗版损失从2010年67亿美元,已经飙升至去年的近318亿美元,2022年将达到520亿美元. 在创 ...
layui静态表格设置滚动条_解决layui数据表格table的横向滚动条显示问题
解决layui数据表格table的横向滚动条显示问题加上这段样式代码就可以解决了: body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ ps:这个问题fly社区 ...
Layui静态表格数据
Layui静态的表格数据,我们有两种方法去进行渲染. 第一种是在html中写如图: 然后在js执行转换如图: 样式如图: 第二种,是直接在layui模块加载中data[]中直接赋值 Html部分给 ...
java实现layui静态表格分页,layui——数据表格分页实例
layui实现数据表格table分页功能,异步加载,表格渲染.总体流程:layui的数据表格设置分页参数开启可以从请求中看到如下图,所以我们需要在后端控制器接收分页数据page和limit进行操作,下 ...
pre标签内容不自动换行解决方案
pre { white-space: pre-wrap; /* CSS-3 / white-space: -moz-pre-wrap; / Mozilla, since 1999 / white-sp ...
layui中table表格内容过多自动换行
表格超出内容没有自动换行,超出部分需要自动换行. 允许长单词换行到下一行:p.test {word-wrap:break-word;}
layui数据表格的数据导入
毕业设计的后台的PC端管理界面是用layui框架搭的,在其中的内联框架中包含了一些数据表格,开始完全不懂该怎么导入数据,后来问了老师,老师跟我讲了才知道.我的毕业设计是用php做的后台,下面就是导入的 ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
layui 读取本地excel内容_layui之数据表格--与后台交互获取数据的方法
jsp或html js //用户列表 var tableIns = table.render({ elem: '#userList', url : 'userAction_findAll.action ...

layui静态表格数字内容不自动换行解决方案

我添加进去后修改为我需要的后，发现出现了小问题：

于是肯定Layui的静态表格对于数字字符是不自动换行的

layui静态表格数字内容不自动换行解决方案相关推荐

最新文章

热门文章