文档章节

css中设置table中的td内容自动换行

庄生晓梦V
 庄生晓梦V
发布于 2017/08/11 22:48
字数 259
阅读 88
收藏 0

在项目中,有用到表格。因为有的内容比较长,所以需要列宽大一些,有的内容比较短,列宽就小一些。遇到了一个问题,在学校联系方式表里面,联系人电话/电子邮件这两列,无论我加多大的宽度,内容总是会把表格列撑的很宽,百度了一下,发现原因是这样的:

一般字母的话会被浏览器默认是一个字符串或者说一个单词,所以不会自动换行

所以需要设置一下,让表格内容自动换行。 
1.在中设置样式style为word-wrap:break-word;word-break:break-all;(一般情况只需要设置word-break:break-all即可,但是有时候需要加word-wrap:break-word ) 
2.把表格的sytle的table-layout:fixed,就是表格固定宽度,就是表格既要自适应他外面的容器,也不要撑出去,然后设置td的word-wrap:break-word;换行,问题就解决了

本文转载自:http://blog.csdn.net/XIAOZHUXMEN/article/details/51068305

庄生晓梦V

庄生晓梦V

粉丝 1
博文 47
码字总数 8016
作品 0
青岛
程序员
私信 提问
加载中

评论(1)

无聊看看官网
有人吗?
div、p、td 的强制不换行及强制换行

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果...

王超
2014/03/20
0
0
div+CSS设置一行内文字超过宽度不换行且不显示

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。 一般的文字截断(适...

emberma
2014/06/25
0
0
页面数据展示的太长,怎么让他自动换行

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字...

元来元去
2010/11/22
0
0
IE6 中,如何令 table 、td 内的 pre 内容在容器边缘强制自动换行?

我在表格的单元格里有个 pre ,形如:   ……        ……      长长长长长的字符串     ……      …… 我已经定义了如下 CSS : pre {   white-space: pre-wrap;  ...

自由狼-台风
2015/03/17
196
0
设置table中的宽度不随文字改变让其固定

设置table中的宽度不随文字改变让其固定 来源:互联网作者:佚名时间:02-17 16:02:28【大 中 小】 页面中table宽度设置width之后,宽度仍然不是固定的,文字太长后不换行,下面有个不错的方...

什么是程序员
2015/11/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
4
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
3
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
13
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部