在项目中,用到的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. bzoj2718

    二分图匹配 首先有个定理:最长反链=最小链覆盖 最小链覆盖可以重复经过点 所以我们不能直接建图 那么我们用floyd判断是否相连 然后建图就行了 #include<bits/stdc++.h&g ...

  2. Ubuntu无法访问Windows磁盘, 且无提示信息

    现象描述, 双系统Ubuntu和Windows, 进入Ubuntu后无法访问Windows盘内容, 且图标闪烁无任何错误信息提示. 1.安装ntfsfix sudo apt-get install n ...

  3. JS自动让手机调出软键盘,进行输入

    $('.search').click(function(){ $('input[type=text]').focus(); //让input框自动聚焦就可以让手机自动调出软键盘 });

  4. 1.7-1.12 MapReduce Wordflow

    一.案例运行MapReduce Wordflow 1.准备examples [root@hadoop-senior oozie-4.0.0-cdh5.3.6]# pwd /opt/cdh-5.3.6/ ...

  5. 【网络爬虫】【java】微博爬虫(四):数据处理——jsoup工具解析html、dom4j读写xml

    之前提到过,对于简单的网页结构解析,可以直接通过观察法.手工写正则解析,可以做出来,比如网易微博.但是对于结构稍微复杂点的,比如新浪微博,如果还用正则,用眼睛一个个去找,未免太麻烦了. 本文介绍两个工 ...

  6. Git 移除某些文件

    一.前言 在使用 Git 版本控制中,有些文件是不需要加入到版本控制中的.如 日志( log ).编译的文件.这些随时都在变的文件,使用用一个代码库的用户.只要稍稍修改一点,或者启动一下,就会变.容易 ...

  7. webstrom打开多个项目,webstrom常用快捷键

    1.webstrom打开多个项目 默认情况下一次只能打开一个项目,如果需要打开多个就按照下面的方法 File -> settings -> Directories -> Add Co ...

  8. C++构造函数和拷贝构造函数详解

    构造函数.析构函数与赋值函数是每个类最基本的函数.它们太普通以致让人容易麻痹大意,其实这些貌似简单的函数就象没有顶盖的下水道那样危险. 每个类只有一个析构函数和一个赋值函数,但可以有多个构造函数(包含 ...

  9. bzoj5093:图的价值(第二类斯特林数+NTT)

    传送门 首先,题目所求为\[n\times 2^{C_{n-1}^2}\sum_{i=0}^{n-1}C_{n-1}^ii^k\] 即对于每个点\(i\),枚举它的度数,然后计算方案.因为有\(n\) ...

  10. 洛谷P2568 GCD(莫比乌斯反演)

    传送门 这题和p2257一样……不过是n和m相同而已…… 所以虽然正解是欧拉函数然而直接改改就行了所以懒得再码一遍了2333 不过这题卡空间,记得mu开short,vis开bool //minamot ...