博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
table表格字母无法换行
阅读量:5095 次
发布时间:2019-06-13

本文共 589 字,大约阅读时间需要 1 分钟。

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

转载于:https://www.cnblogs.com/moutudou/p/7204391.html

你可能感兴趣的文章
线性代数_矩阵基础
查看>>
webpack入门宝典
查看>>
hdu_5286_wyh2000 and sequence(分块)
查看>>
Java应用中使用ShutdownHook友好地清理现场
查看>>
MVC校验
查看>>
sgu 160 Magic Multiplying Machine
查看>>
24 款必备的 Linux 桌面应用(2016 版)
查看>>
Netty中的ChannelHandler
查看>>
bash 设置
查看>>
改变字符串里面多个颜色
查看>>
POJ 2195 Going Home【最小费用最大流】
查看>>
MySQL 用户权限管理
查看>>
windows下的DeepLearning环境搭建:Theano的安装
查看>>
C++ vector 用法
查看>>
责任链模式 详解
查看>>
LRU算法总结
查看>>
236. 二叉树的最近公共祖先
查看>>
IOCTL错误
查看>>
yii2购物车实现
查看>>
[CQOI2014]危桥
查看>>