共需要四步：

1.在table元素的父容器div加上：class="table-responsive"

3.设置表头th的width：<th width="20%"></th>

4.在可能出现内容超长的td上加上样式：<td style="word-break:break-all; word-wrap:break-word; white-space:inherit"></td>

完成设置！！！

Bootstrap table 元素列内容超长自动折行显示方法?的更多相关文章

  1. table中td 内容超长 自动折行 （含字母数字文字）

    <table style="width:100%;table-layout:fixed;"> //列宽由表格宽度和列宽度设定 <thead> <th& ...

  2. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  3. UIlabel多行文字自动换行 （自动折行）

    UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(, , , )]; UILabel *label = [[UILabel al ...

  4. emacs自动折行设置

    - emacs自动折行     - 临时设置下 M-x `toggle-truncate-lines`    - init.el 中添加 `(toggle-truncate-lines 1)`

  5. textarea的placeholder属性内容折行显示(PC和移动端端)

    1.PC端折行方法 placeholder="字体 字体" 可以使其折行显示   2.移动端折行方法 webkit内核 textarea::-webkit-input-placeh ...

  6. Flexigrid折行显示问题

    上会写的Flexigrid折行显示时,获取值有问题,报错. getRows: function(){ //add by jej var rtnList = new Array(); var objRo ...

  7. html中，纯数字或纯英文的一串字符超出父容器不会折行显示，如何解决？

    这种情况在软件使用过程中一般不会出现,只有测试人员在测试的时候手比较贱会给你弄一个这种数据,当然这也算是bug吧. 如图:“经营范围”的值严重超出父容器长度,并且没有像“服务信息”一样折行显示.这种情 ...

  8. <th>折行显示

    设置了一些框架的样式导致折行显示失效,解决办法: https://jingyan.baidu.com/article/3a2f7c2e24cd1826afd611e7.html

  9. bootstrap table 标题列重复

    使用bootstrap table生成表格,出现一个奇怪问题,标题列重复.查了一大堆资料,没有找到可以解决问题的. 以为是类库版本的问题,全部替换成了example中的引用,还是这个问题. 后来仔细查 ...

随机推荐

  1. HTML添加样式三种办法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Java 反射之动态代理

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt205 利用Java反射机制你可以在运行期动态的创建接口的实现.java.la ...

  3. WCF（二）三种通信模式

    WCF在通信过程中有三种模式:请求与答复.单向.双工通信 请求与答复模式 客户端发送请求,然后一直等待服务端的响应答复(异步调用除外),期间处于假死状态,直到服务端有了答复后才能继续执行其他程序 请求 ...

  4. yum仓库的定制

    矮哥linux运维群: 93324526 笔者QQ:578843228 一.简介 软件包的分类.源码包脚本安装二进制包(rpm包.系统默认包) 源码包: C语言的源代码优点:开源,如果有能力,可以修改 ...

  5. 自制STP配置实验

    本图使用Gns模拟器 实验需求: 1.要求利用vtp实现vlan同步设置 2.要求vtp server实现备份冗余 3.创建vlan 1~10要求MLSW1 是奇数vlan主根 MLSW2 是偶数vl ...

  6. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  7. 第二次作业：编写一个四则运算的"软件"

    - 题目: 请编写一个能自动生成小学四则运算题目的 “软件”. 让程序能接受用户输入答案,并判定对错. 最后给出总共 对/错 的数量. 需求分析: ●基本功能 ●实现100以内的加法 ●实现100以内 ...

  8. HTML5 贝塞尔绘画 桃心

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 201521123081《Java程序设计》 第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 参考资料:百度脑图(上图为第3周实验学习总结中未展开部分) 1.2 使用常规方法总结其他上课内容. 多态.思维导图中有提及. 2. ...

  10. 201521123121 《Java程序设计》第1周学习总结

    1. 本周学习总结 我们将要重点接触的JAVA SE主要分为4个部分:JVM.JRE.JDK.java语言. 其中JVM作为运行虚拟机隶属于JRE运行环境中,是JAVA通用性.跨平台适应性高的基础保证 ...