`
rebecca
  • 浏览: 315006 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

TABLE超出宽度自动换行CSS隐藏

阅读更多

 IE浏览器

  一、使用 table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200"><tr>
<td>这里超出限制的宽度,自动换行,隐藏部分</td></tr></table> 

 二、使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">
<tr><td width="25%" style="word-break : break-all; ">
超出限制的内容</td>
<td style="word-wrap : break-word ;">超出限制的内容
</td></tr></table>  

 三、在td,th中嵌套div,p等采用上面提到的div,p的换行方法

  Firefox浏览器

  一、使 用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word- wrap : break-word ;换行,使用overflow:hidden;隐藏超出内,这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200"><tr> 
<td width="25%"   style="word-break : break-all; overflow:hidden; ">
超出范围的文章内容</td> 
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">
超出范围的文字内容</td> 

</tr></table> 

  二、在td,th中嵌套div,p等采用上面提到的对付Firefox的方法。
  最佳CSS定义换行代码

.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }                                                    

分享到:
评论

相关推荐

    表格自动换行主义CSS属性

    - **fixed**: 指定固定列宽,当单元格内容超出设定宽度时,内容将自动换行,而不是伸展列宽。 2. **`word-break`** - **normal**: 默认值,单词不会被拆分到两行之间。 - **break-all**: 允许在单词内的任何...

    td 内容自动换行 table表格td设置宽度后文字太多自动换行

    综上所述,解决表格中单元格内容超出宽度自动换行的方法是设置表格的布局为固定宽度,并且给单元格添加`word-wrap: break-word;`的样式规则。这样做既保持了布局的整齐性,又确保了内容的完整显示。希望这篇文章能够...

    CSS自动换行

    在前端开发领域,尤其是网页布局设计中,自动换行是一个至关重要的功能,它能够确保文本在不同的屏幕尺寸或容器宽度下能够自适应地显示,避免文本溢出或排版错乱的问题。本文将深入探讨五种不同的自动换行策略,这些...

    div+CSS设置一行内文字超过宽度不换行且不显示截断文字加…

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

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

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

    支持IE和FF同时自动换行

    ##### 2.1 CSS自动换行相关属性 1. **`word-wrap`**:该属性用于规定如何处理超出容器宽度的单词。 - **取值**: - `normal`:默认值,长单词或URL不会被换行,而是延伸到下一个容器边界。 - `break-word`:允许...

    css之自动换行.pdf

    首先,块级元素如`div`和`p`默认具有`white-space:normal`属性,这意味着当定义了宽度后,内容会根据需要自动换行。例如: ```html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal,当...

    通过CSS让TD自动换行

    但如果指定了td的宽度,一旦内容超过这个宽度,浏览器会自动忽略nowrap属性,使文本换行以适应设定的宽度。 为了使TD在内容过长时自动换行,我们可以利用CSS的`word-break`属性。`word-break`属性允许我们在特定...

    浅析响应式框架中,table表头自动换行的快速解决方法

    然而,在使用这些框架处理表格(table)时,尤其是在移动端,可能会遇到一个问题:表头(thead)内容因为屏幕宽度限制而自动换行,这不仅影响了美观,也可能降低用户的阅读体验。本文将探讨如何快速解决这个问题。 ...

    css控制文字自动换行的实现方法

    对于表格(`&lt;table&gt;`)元素,同样可以通过CSS控制其内部文字的自动换行。在IE浏览器中,可以使用`table-layout:fixed;`属性来强制表格的宽度,同时隐藏超出指定宽度的多余内容。而Firefox浏览器则需要在`&lt;td&gt;`和`...

    对于div,p等块级元素css如何实现自动换行

    在网页设计和开发过程中,我们经常会遇到需要处理内容自动换行的情况,尤其是在块级元素如div、p等元素中的文本内容超过了设定的宽度后,自动换行的处理就显得尤为重要。本文将详细探讨如何通过CSS来实现块级元素...

    css控制文本实现越界省略号以及自动换行

    /* 当内容超出宽度时隐藏超出部分 */ text-overflow: ellipsis; /* 当文本溢出时显示省略号 */ } ``` 这段代码创建了一个区块,其中的文本将在宽度限制内显示,且不会换行。当文本长度超过容器宽度时,超出部分会...

    css之自动换行实现代码

    首先,对于常见的块级元素如`div`和`p`,正常文字的换行是通过CSS属性`white-space`来控制的,默认值为`normal`,这保证了当元素宽度被定义之后,文本会自动换行。例如: ```css #wrap { white-space: normal; ...

    表格 题头拖动 超出宽度显示省略号(中文亦可) 滚动条 兼容IE,FF,safari

    `,这样当内容超出设定宽度时,会自动添加省略号,且文本不会换行。 3. **滚动条**:在表格内容过多时,滚动条是必不可少的。CSS可以控制滚动条的样式,如颜色、宽度等,通过`::-webkit-scrollbar`选择器在Webkit...

    CSS超出文本指定宽度用省略号代替和文本不换行

    /* 隐藏超出宽度的内容 */ text-overflow: ellipsis; /* 当内容溢出时显示省略号 */ } ``` 这组样式组合在一起,可以确保文本在设定的宽度内显示,超出部分被隐藏,并用省略号(...)表示。`word-break: keep-...

    div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...

    当内容在容器内宽度不足以完整显示时,浏览器默认会将文字换行,但是有些时候我们不希望文字进行换行显示,而是希望超出容器宽度的部分不显示或者使用省略号来代替。对于这类需求,可以通过CSS来实现。 在CSS中,...

    css实现连续的英文或数字自动换行的方法

    通过这些属性,可以实现连续的英文或数字在容器宽度不足时自动换行。 首先,对于div元素,在IE浏览器中,可以使用`white-space:normal;`和`word-break:break-all;`两个属性。`white-space:normal;`属性会使得空白符...

    css word-break word-wrap 前台显示自动换行

    ` 是一种较好的解决方案,它能确保长串英文自动换行且不会超出容器,同时隐藏超出的部分。 - 然而,`word-wrap:break-word;overflow:auto;` 在Firefox下,长串英文可能会被部分遮盖。 5. **图片自动换行** - 当...

    table中td内容换行问题

    例如,用户输入像"lovelovelovelovelovelovelovelovelovelovelove"这样的字符串时,由于英文字符之间没有空格,浏览器会默认持续在同一行显示,这会导致单元格宽度被拉伸,甚至超出容器的限制。 解决这类问题的方法...

Global site tag (gtag.js) - Google Analytics