共需要四步：

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. ORACLE SEQUENCE的简单介绍

    先假设有这么一个表: create table S_Depart ( DepartId INT not null, DepartName NVARCHAR2() not null, DepartOrd ...

  2. 32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用

    32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用 一丶32位(x86也称为80386)与8086(16位)汇编的区别 1.寄存器的改变 AX 变为 EAX  可以这样想,16位通 ...

  3. 图片懒加载Demo

    相关知识: [js获取元素位置+元素大小]全面总结

  4. Apache开启压缩功能

    起源 在一般的web服务器中,都会开启压缩功能,也就是deflate或者是gzip的压缩. 开启压缩功能主要的目的是为了减少传输的带宽,从而当服务器响应给客户端的时候,会大大减少传输的数据,代价就是在 ...

  5. 小程序脚本语言WXS，你想要的都在这里了

    WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...

  6. Rsync for windows

    说到电脑,我真是一屋子都是. 从房间到大厅,就已经有5台.这还没包括服务器. 虽然这5台电脑我最常用的也只是2~3台.其他的不是给朋友们来坐的时候打打游戏.就是给妈妈上网看看报纸. 不过我相信很多朋友 ...

  7. 转：【深入Java虚拟机】之五：多态性实现机制——静态分派与动态分派

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17965867   方法解析 Class文件的编译过程中不包含传统编译中的连接步骤,一切方法 ...

  8. 201521123091 《Java程序设计》第10周学习总结

    Java 第十周总结 第十周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异 ...

  9. 201521123112《Java程序设计》第3周学习总结

    1.本周学习总结 使用工具:百度脑图 2.书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int ...

  10. 201521123074 《Java程序设计》第2周学习总结

    1.本周学习总结 学习了string类的一些用法,Java编写大致与c相同,但是要注意Java是面向对象的语言.例如两个字符串"=="比较,Java与c可能会有不同结果. 学习了i ...