共需要四步：

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. linux中文件I/O操作（系统I/O）

    我们都知道linux下所有设备都是以文件存在的,所以当我们需要用到这些设备的时候,首先就需要打开它们,下面我们来详细了解一下文件I/O操作. 用到的文件I/O有以下几个操作:打开文件.读文件.写文件. ...

  2. Selenium八种基本定位方式---基于python

    from selenium import  webdriver driver=webdriver.Firefox() driver.get("https://www.baidu.com&qu ...

  3. 汇编指令-MOV与ldr区别(7)

    MOV 1.可以寄存器与寄存器之间传递数据 2.可以常数传递到寄存器中(常数不能超过32位) LDR 1.可以地址与寄存器之间的数据传递 2.也可以常数传递到寄存器中 实例: 1.r1与r2之间传递就 ...

  4. PHP面向对象知识点

    public private protected __construct() __destruct() __set() __get() extends(继承) :: (重载) abstract cla ...

  5. less和scss

    一.less基础语法 1.声明变量:@变量名:变量值:      使用变量:@变量名; 2.混合(Mixins) 1)无参混合 声明: .class{} 调用:在选择器中,使用.class;直接调用 ...

  6. 【Alpha】第一次Daily Scrum Meeting

    一.今日站立式会议照片 二.会议内容 1.调研市场现有礼物挑选软件,分析优势,亮点,劣势 2.确立开发环境和安装调试 三.燃尽图 四.遇到的困难 在准备开发环境和安装调试时遇到系统和开发环境不要兼容, ...

  7. 【Beta阶段】测试与发布

    [Beta阶段]测试报告 一.Bug记录 1. 已经修复的BUG:文件查重的小组的空指针处理了 . 2.未能修复的bug: (1).在进行查重的时候必要要有10个文件,不然会报错:        (2 ...

  8. 【Alpha阶段汇总】成果展示与体验总结

    一.燃尽图 二.软件截图 三.代码与图片.音乐素材仓库 git仓库 四.问题与总结 1.git提交问题 之前创建的仓库地址是http://git.oschina.net/8265559926/grou ...

  9. 第02周-Java作业评价

    1. 本周作业简评与建议 作业存在的问题 格式上还是存在问题,但是比较第一次有很大的进步. 答题上,有的同学还是很敷衍,题目要求有分析过程,但是只写一个false,true,没有分析.也比较缺少自己的 ...

  10. 201521123051 《Java程序设计》第4周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 使用工具:百度脑图 1.2 使用常规方法总结其他上课内容.(多态) 多态的定义:父类的引用指向子类的对象. 父类的引用:一是指父类变 ...