td中内容自动换行
使用<table> 进行页面开发,会遇到字符串很长将table撑开变形的问题,在网上搜了一些,终于找到 一个比较好用的解决方法。贴出来,方便以后使用。在table标签中加入如下的style就行了。
<table border="0"
cellspacing="0" cellpadding="0" width="200" align="center"
style="table-layout:fixed;word-wrap:break-word;word-break:break-all">
很简单,加一个style ..
<td style="word-wrap:break-word:"
width="160">aaaaaabbbbcccdddeeffesfsdffdfdsfsdfasdfasdfasfadfadf</td>
这样就不会让table撑破了!
<table
width="100%" border="0" cellspacing="0" cellpadding="0"
style="table-layout:fixed;word-break:break-all"><tr>
<td
style="word-wrap:break-word;word-break:break-all">xxx</td></tr></table>
1.
单元格自动换行
只要在table属性中写上style="table-layout: fixed"即可,如下
<table
width="80%" height="166" border="0" style="table-layout:
fixed">
表格就实现了单元格的压缩.但会对单元格内的文字显示不全.
2可以解决这个问题.
2.对单元格的控制.
<td width="50%"
style="word-wrap: break-word;">
不换行 简单些td中加white-space:
nowrap;就行了
换行如下:
<table style="table-layout:fixed;"
width='100%'>
<tr>
<td width=50>asdasd</td>
<td
width="100%" style="word-wrap : break-word;word-break: break-all;
overflow:hidden;
">abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>
在Table中加入如下样式:
style="table-layout:
fixed;WORD-BREAK: break-all; WORD-WRAP:
break-word"
在默认情况下网页是不会自动换行的,如果字符很长的话,就会
使网页变型,因为它是通过绝对长度来控制的,我们在实际使用
中可是不想让它这样,其实只要在表格控制中添加一句
<td
style="word-break:break-all">就搞定了。
下面是一段示范的代码:
<body>
<table
width="100" border="0"><!-- 控制表格的长度来换行 -->
<tr>
<td
width="628" style="word-break:break-all">
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</td>
</tr>
</table>
</body>
在用表格做网页排版的时候,有时会碰到一段连续的英文词或者连续的标点号,会出现把网页就撑开的现象。
可以用css强制换行:
<table
style="table-layout: fixed;" >
<tr>
<td style="word-break:
break-all;
word-wrap:break-word;">abcdefghtiasdhjkasdha<td>
</tr>
</table>
table-layout:
fixed 可以让表格中有连续的标点号之类的字符时自动换行
word-break: break-all; word-wrap:break-word
此样式可以让表格中的一些连续的英文单词自动换行
<table width="100"
border="0"><!-- 控制表格的长度来换行 -->
<tr>
<td width="100"
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
>
RippleRippleRippleRippleRippleRippleRippleRippleRippleRippleRippleRippleRippleRipple
</td>
</tr>
</table>
<table
width="100%" border="0" cellspacing="0" cellpadding="0"
style="table-layout:fixed;word-break:break-all"><tr>
<td
style="word-wrap:break-word;word-break:break-all">xxx</td></tr></table>
1. java 版
//以空格为分割符,将长字符串分段, 末段小于2个字符的合并到前一个段
private static String cutLongWord(String longWord) {
int
wordNumber=5;
if (Report.isEmpty(longWord)) {
return longWord;
}
StringBuilder cutWord = new
StringBuilder();
if (NumberUtils.isNumber(longWord)) {
BigDecimal big = new BigDecimal(longWord);
String
tempLongWord = big.setScale(1, BigDecimal.ROUND_HALF_UP).toString();
longWord = tempLongWord.length() - 2 > longWord.length() ?
tempLongWord : longWord;
while (longWord.length() >
wordNumber) {
cutWord.append(" " + longWord.substring(0,
wordNumber));
longWord = longWord.substring(wordNumber,
longWord.length());
}
if (cutWord.length() ==
0 || longWord.length() > 2)
cutWord.append(" ");
cutWord.append(longWord);
return
cutWord.substring(1, cutWord.length());
} else {
String[] words = longWord.split(" ");
for (String word : words)
{
if (word.length() <= wordNumber) {
cutWord.append(" " + word);
continue;
}
while (word.length() > wordNumber) {
cutWord.append(" " + word.substring(0, wordNumber));
word = word.substring(wordNumber, word.length());
}
// If the length of the last string is less than 3,
merge it to
// last but one.
if
(word.length() > 2)
cutWord.append(" ");
cutWord.append(word);
}
return
cutWord.substring(1, cutWord.length());
}
}
2. js版
<script
type="text/javascript">
// <![CDATA[
function
toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all)
toBreakWord(37);
// ]]>
</script>
<table border="0"
cellpadding="0" cellspacing="0">
<tr>
<td
nowrap>
<span style="text-overflow: ellipsis; overflow-x: hidden;
width:
300px;">水果拼盘:西瓜、苹果、哈密瓜,或者任何别的什么</span>
</td>
</tr>
</table>
<td
nowrap>
<div title='<%# Eval("Context") %>'
style="text-overflow: ellipsis; overflow-x: hidden; width: 120px;">
<%# Eval("Context")%>
</div>
</td>
加个css就能搞定,你的意思是先把td固定住,然后输入的内容td装不下了就变成...是吧!
把这个加到你的css文件里 .ctltable{ border-collapse: collapse; table-layout:fixed}
.ctltable td { text-overflow:ellipsis; overflow:hidden; white-space: nowrap;
padding:2px} ctltable加在table上就可以了 <table class="ctltable">
td中内容自动换行的更多相关文章
- table表格td内内容自动换行
项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...
- 设置table中的td一连串内容自动换行
遇到一长串字母撑出了td宽度,导致整个表格错乱,如图: , 解决办法: 第一: table 加上css: table-layout: fixed;(此css属性 表示 列宽由表格宽度和列宽度设定.不会 ...
- html-div中内容自动换行
<div style='width: 100px;display:block;word-break: break-all;word-wrap: break-word;'> 内容超出div宽 ...
- 怎样让HTML 表格中内容自动换行??
<table style="word-break:break-all; word-wrap:break-all;">
- Table里td中的文本过长,设置不换行,随内容同行显示(转载)
当td中内容过长时,内容会溢出,换行显示,美观超级差,在td里设置这个属性 "white-space:nowrap 就可以解决排版问题啦 <td style="white ...
- css中设置table中的td内容自动换行
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...
- td中的值自动换行
设置td中的值自动换行在<td ></td> 中加上这样一句代码,可以简省设置,使长字符串换行.而不用设置width,height. style="word-wrap ...
- <td style="word-break:break-all"> 在html中控制自动换行
在html中控制自动换行 其实只要在表格控制中添加一句 <td style="word-break:break-all">就搞定了. 其中可能对英文换行可能会分开一 ...
- div中内容超出自动换行
下面以table中td的内容超出为例说明: 首先: td { display: block; } 然后:给td设置css样式: 1. td { word-wrap: break-word; } 2. ...
随机推荐
- Python框架之Django学习笔记(十)
又是一周周末,如约学习Django框架.在上一次,介绍了MVC开发模式以及Django自己的MVT开发模式,此次,就从数据处理层Model谈起. 数据库配置 首先,我们需要做些初始配置:我们需要告诉D ...
- 第九届极客大挑战 部分WP
CODE 和0xpoker分0day 百度 取石子游戏. https://blog.csdn.net/qq_33765907/article/details/51174524 已经说得很详细了,慢慢来 ...
- BugKu-图穷匕见
拿到图片后,先放到winhex,看看文件头是不是和jpg匹配,看看文件尾,不是FFD9 ,说明后边肯定是藏了什么东西. 顺便找一下文件尾有没有flag(估计是签到题目才会这样吧). binwalk跑一 ...
- Linux之ubuntu系统操作学习笔记
1,swp分区:当内存不够时用swp分区顶替内存 2,语言环境检查 locale –a:可以明白系统支持什么语言 3,安装软件: apt-cache search(软件):搜索软件 apt-cach ...
- SQLAlchemy 学习笔记(三):ORM 中的关系构建
个人笔记,不保证正确. 关系构建:ForeignKey 与 relationship 关系构建的重点,在于搞清楚这两个函数的用法.ForeignKey 的用法已经在 SQL表达式语言 - 表定义中的约 ...
- ValueStack 源码
/* * Copyright 2002-2007,2009 The Apache Software Foundation. * * Licensed under the Apache License, ...
- BZOJ 1864:[Zjoi2006]三色二叉树(树DP)
三色二叉树 问题描述 输入 仅有一行,不超过500000个字符,表示一个二叉树序列. 输出 输出文件也只有一行,包含两个数,依次表示最多和最少有多少个点能够被染成绿色. 样例输入 1122002010 ...
- 通过TCP实现文件传输
import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.In ...
- 编译静态库tinyxml2
tinyxml的makefile文件默认是编译可执行的二进制文件xmltest. 需要改成静态库. 更改OUTPUT := xmltest 为:OUTPUT := libtinyxml.a 删除SR ...
- [openjudge6043]哆啦A梦的时光机
[openjudge6043]哆啦A梦的时光机 试题描述 哆啦A梦有一个神奇的道具:时光机.坐着它,大雄和他的伙伴们能穿越时空,回到过去或者去到未来. 有一天,大雄和他的伙伴们想穿越时空进行探险,可是 ...