在项目中,用到的table比较多,本来布局挺好的,后来在td内写入英文字母,整个布局就乱了,会撑的很宽,不换行,后来才知道:一般字母的话会被浏览器默认是一个字符串或者说一个单词,所以不会自动换行。

于是就需要进行设置,让表格自动换行:

1.在td中设置样式style为word-wrap:break-word;word-break:break-all;(一般只需设置word-break:break-all,但有时候需加word-wrap:break-word ),td设置这俩样式的时候,table不需要设置fixed;; 
2.把表格的sytle的table-layout:fixed,就是表格固定宽度,就是表格既要自适应他外面的容器,也不要撑出去,然后设置td的word-wrap:break-word;换行即可,这样设置的话,tabel会平分成两部分,所设置的不同宽度就不起作用。

其他元素实现换行:

强制不换行

div{
  white-space:nowrap;
}

自动换行

div{ 
  word-wrap: break-word; 
  word-break: normal; 
}

强制英文单词断行

div{
  word-break:break-all;
}

table表格字母无法换行的更多相关文章

  1. java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  2. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  3. table表格超出部分显示省略号

    做table表格时,某一列字数比较多,希望超出宽度的部分以省略号显示 设置table的布局 默认automatic 以表格内容显示相应宽度 改成fixed 以表格列宽显示内容 table{    ta ...

  4. 怎么设置table(表格)手机端自适应宽度

    我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率设备上却经常撑破列宽,很是影响美观和客户体验.这里就 ...

  5. html5常用标签table表格布局

    html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...

  6. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  7. MiniUI动态添加table表格

    本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...

  8. table表格宽度固定,同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  9. Bootstrap Table表格一直加载(load)不了数据-解决办法

    bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一 ...

随机推荐

  1. [HNOI 2010] 弹飞绵羊

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2002 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...

  2. This file requires _WIN32_WINNT to be #defined at least to 0x0403. Value 0x0501 or higher is recommended

    VS2005转换成VS2010时出现的问题: This file requires _WIN32_WINNT to be #defined at least to 0x0403. Value 0x05 ...

  3. git搭建私有仓库

    git gui参考 https://ask.helplib.com/git/post_1004941

  4. Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作

    55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...

  5. 3-3if-else条件结构 & 3-4 & 3-5

    新建类: ConditionDemo2 package com.imooc.operator; public class ConditionDemo2 { public static void mai ...

  6. CTP Release() 的注意问题

    测试时发现CThostFtdcMdSpi有个比较严重的问题,就是使用Release()退出清理对象时 会出现死机,并且频率很高,怎样解决? 答:请参考以下代码的释放顺序. template <c ...

  7. bzoj 3504: [Cqoi2014]危桥【最大流】

    妙啊,很容易想到连(s,a1,an)(s,b1,bn)(a2,t,an)(b2,t,bn),这样,但是可能会发生a1流到b2或者b1流到a2这种不合法情况 考虑跑两次,第二次交换b1b2,如果两次都合 ...

  8. springboot与shiro和mybatis和mysql

    测试项目已上传到GitHub:https://github.com/xiaostudy/springboot_shiro_test1 1.创建springboot项目 <!-- 数据库连接池 - ...

  9. GenericKeychain

    KeychainItemWrapper是apple官方例子“GenericKeychain”里一个访问keychain常用操作的封装类,在官网上 下载了GenericKeychain项目后,只需要把“ ...

  10. rn-splash-screen 启动页 ios

    1.删除iOS工程文件夹下的 LaunchScreen.xib 文件 2. 3.  如果第4步不一样的样式,可以重新走这个图片的步骤就行 4.进入iOS工程的AppDelegate.m中做如下修改: ...