我经常会遇到这样的问题:在设计好宽度的表格中,因为有些文本信息过长,而把表格撑开(弄的面目全非)!很让人头疼。其实解决这个问题很简单,只要在<td>的样式中加入word-break: break-all(强制换行),就会使那些不听话的文本自动回行。是我刚刚学到的,一起分享~~~
一起看看吧:
使用word-break之前:
<table width="300" border="1">
<tr>
<td width="100px">测试内容:</td>
<td width="200px">asjdhfajshdflkajfdhajsdhfjashfieyruqeqyuiroqwytxcbvmbzxmzmvb</td>
</tr>
</table>
使用word-break之后:
<table width="300" border="1">
<tr>
<td width="100px">测试内容:</td>
<td width="200px" style="word-break:break-all">asjdhfajshdflkajfdhajsdhfjasxmzmvb</td>
</tr>
</table>
试试看吧,结果孑然不同:)
转自http://hi.baidu.com/zsjfd/blog/item/42ce00a710eb5392d04358ae.html
分享到:
相关推荐
在网页设计中,经常需要处理表格(table)的布局问题,特别是当单元格(cell)内的文本内容过长时,如何保持单元格的固定宽度,不让内容换行,并在显示不下的情况下添加省略号("...")表示内容被截断。这涉及到CSS...
在网页设计中,经常遇到一个问题,那就是表格中的单元格(td)会被其内部的内容自动撑开,导致表格的布局混乱。这种情况通常是由于内容长度超过了单元格的预设宽度,浏览器会默认扩展单元格来适应内容。然而,我们...
本文将深入探讨如何使用JavaScript和CSS来实现`td`内容不换行且不撑开单元格的效果。 首先,我们需要理解CSS中的几个关键属性,它们在解决这个问题上起着核心作用: 1. `white-space`: 这个属性控制元素内的空白符...
【引子】在开发的过程中,表格Table有个缺陷,如果一行中某个单元格的超过一行,表格就不够美观了。下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长 度,不会撑开TD,也不会影响其他TD,点击某...
这里的`width="10"`是一个技巧,即使得表格在没有图片时也有一个最小宽度,但实际图片会自动撑开表格,因此这个设置不会影响图片的显示。 这种方案的一个关键优点是它的跨浏览器兼容性。经过测试,它在IE、Firefox...
在表格中,可以使用 `table-layout: fixed` 来控制表格的布局算法,使其根据列宽而不是内容宽度进行布局,以避免单元格内容撑开表格。 ```css table { table-layout: fixed; } ``` 这样,表格的宽度将仅取...
CSS控制文本自动换行的问题 在网页设计中,CSS控制文本自动换行的问题是一个常见的问题,尤其是在使用表格进行网页排版的时候。...这些样式可以让表格中的字符自动换行,避免网页被撑开,影响网页的布局和美观性。
`属性用于控制文本不换行,这样可以保证当表格单元格宽度不足以显示全部内容时,文本不会自动换行。`overflow: hidden;`属性则是用来隐藏超出单元格宽度的部分,如果内容超出单元格的宽度,这一部分将被隐藏。最后,...
然而,在处理表格宽度时,有时会遇到一个问题:当表格中的文字过长,不换行导致表格宽度被撑开,无法保持预设的固定宽度。这会给页面布局带来困扰,尤其是当你希望表格的列宽保持一致时。为了解决这个问题,我们可以...
3. **Table元素**:在HTML表格中,`<tr>`代表表格行(Table Row),`<td>`代表表格数据单元格(Table Data Cell)。 4. **表格高度样式**:给一行两列的表格概念高度样式,最合理且能减少代码臃肿的方法是在`...
3. **Table标签**:在HTML中,`<TR>`代表表格的行(Table Row),`<TD>`代表表格的单元格(Table Data)。 4. **表格高度样式**:给一行两列的表格概念高度样式,一般会在`<table>`标签中定义`style`属性,或者在...
在网页设计中,设置表格(table)的背景图片并使其完全填充有时会遇到问题,特别是在背景图片无法100%显示时。这个问题涉及到CSS样式、表格的布局以及内容的填充。以下是一些解决方法和相关的知识点: 首先,我们...
3. Firefox下文本无法撑开容器高度,通常是因为块级元素默认不包含内联内容的高度,可以使用`overflow:auto`或`display:flex`解决。 这些面试问题覆盖了美工组职位所需的关键技能,包括基础的HTML和CSS知识,以及...
通过合并单元格(`<td>`)可以控制显示效果,不过在调整对齐和避免内容撑开表格宽度方面可能会有一些挑战。 ```html <td colspan="2">祝贺张馒头廖花卷</td> <td>鼠年大吉</td> ``` 至于改变删除线...