`

不让TD中的文本撑开表格

    博客分类:
  • Jsp
阅读更多

 

我经常会遇到这样的问题:在设计好宽度的表格中,因为有些文本信息过长,而把表格撑开(弄的面目全非)!很让人头疼。其实解决这个问题很简单,只要在<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 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    在网页设计中,经常需要处理表格(table)的布局问题,特别是当单元格(cell)内的文本内容过长时,如何保持单元格的固定宽度,不让内容换行,并在显示不下的情况下添加省略号("...")表示内容被截断。这涉及到CSS...

    css实现不再让内容把td撑开的常用解决方法

    在网页设计中,经常遇到一个问题,那就是表格中的单元格(td)会被其内部的内容自动撑开,导致表格的布局混乱。这种情况通常是由于内容长度超过了单元格的预设宽度,浏览器会默认扩展单元格来适应内容。然而,我们...

    javascript 使td内容不换行不撑开

    本文将深入探讨如何使用JavaScript和CSS来实现`td`内容不换行且不撑开单元格的效果。 首先,我们需要理解CSS中的几个关键属性,它们在解决这个问题上起着核心作用: 1. `white-space`: 这个属性控制元素内的空白符...

    JavaScript多行文本一行显示,点击可显示单元格全部内容的Table

    【引子】在开发的过程中,表格Table有个缺陷,如果一行中某个单元格的超过一行,表格就不够美观了。下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长 度,不会撑开TD,也不会影响其他TD,点击某...

    CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器).docx

    这里的`width="10"`是一个技巧,即使得表格在没有图片时也有一个最小宽度,但实际图片会自动撑开表格,因此这个设置不会影响图片的显示。 这种方案的一个关键优点是它的跨浏览器兼容性。经过测试,它在IE、Firefox...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    在表格中,可以使用 `table-layout: fixed` 来控制表格的布局算法,使其根据列宽而不是内容宽度进行布局,以避免单元格内容撑开表格。 ```css table { table-layout: fixed; } ``` 这样,表格的宽度将仅取...

    CSS控制文本自动换行的问题

    CSS控制文本自动换行的问题 在网页设计中,CSS控制文本自动换行的问题是一个常见的问题,尤其是在使用表格进行网页排版的时候。...这些样式可以让表格中的字符自动换行,避免网页被撑开,影响网页的布局和美观性。

    表格单元格内容超出时显示省略号效果(实现代码)

    `属性用于控制文本不换行,这样可以保证当表格单元格宽度不足以显示全部内容时,文本不会自动换行。`overflow: hidden;`属性则是用来隐藏超出单元格宽度的部分,如果内容超出单元格的宽度,这一部分将被隐藏。最后,...

    设置table中的宽度不随文字改变让其固定

    然而,在处理表格宽度时,有时会遇到一个问题:当表格中的文字过长,不换行导致表格宽度被撑开,无法保持预设的固定宽度。这会给页面布局带来困扰,尤其是当你希望表格的列宽保持一致时。为了解决这个问题,我们可以...

    网站设计师面试题.docx

    3. **Table元素**:在HTML表格中,`&lt;tr&gt;`代表表格行(Table Row),`&lt;td&gt;`代表表格数据单元格(Table Data Cell)。 4. **表格高度样式**:给一行两列的表格概念高度样式,最合理且能减少代码臃肿的方法是在`...

    网站设计师面试题.pdf

    3. **Table标签**:在HTML中,`&lt;TR&gt;`代表表格的行(Table Row),`&lt;TD&gt;`代表表格的单元格(Table Data)。 4. **表格高度样式**:给一行两列的表格概念高度样式,一般会在`&lt;table&gt;`标签中定义`style`属性,或者在...

    table设置背景图片,不能100%显示解决方法

    在网页设计中,设置表格(table)的背景图片并使其完全填充有时会遇到问题,特别是在背景图片无法100%显示时。这个问题涉及到CSS样式、表格的布局以及内容的填充。以下是一些解决方法和相关的知识点: 首先,我们...

    美工组面试问题.docx

    3. Firefox下文本无法撑开容器高度,通常是因为块级元素默认不包含内联内容的高度,可以使用`overflow:auto`或`display:flex`解决。 这些面试问题覆盖了美工组职位所需的关键技能,包括基础的HTML和CSS知识,以及...

    初学CSS样式让一行显示两行文字及删除线颜色改变的探索(第一次写博客求指点)

    通过合并单元格(`&lt;td&gt;`)可以控制显示效果,不过在调整对齐和避免内容撑开表格宽度方面可能会有一些挑战。 ```html &lt;td colspan="2"&gt;祝贺张馒头廖花卷&lt;/td&gt; &lt;td&gt;鼠年大吉&lt;/td&gt; ``` 至于改变删除线...

Global site tag (gtag.js) - Google Analytics