`

td内容不换行,超出时自动隐藏

    博客分类:
  • js
 
阅读更多

当td内容过多时,td会自动换行,可以在td内加上nowrap,但是这样,td会被撑大。

以下方法可以使得内容过多时不换行,同时也不会把td撑大

<td>
<div   style= "overflow:hidden;   height:20px;   line-height:20px; ">

文本内容
</div>
</td>

分享到:
评论
1 楼 青春丶冭柔情 2012-08-02  
不错哈!! 顶!!

相关推荐

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

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

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

    当希望文本在容器内不换行且超出部分以省略号表示时,可以使用以下CSS样式: ```css div { width: 100px; /* 容器宽度 */ overflow: hidden; /* 隐藏超出部分 */ white-space: nowrap; /* 不允许文本换行 */ ...

    javascript 使td内容不换行不撑开

    在网页设计中,有时我们需要确保表格(`&lt;table&gt;`)中的单元格(`&lt;td&gt;`)内容不换行且不撑开单元格的宽度。这通常发生在显示长字符串或者需要控制表格布局的情况下。标题和描述中提到的问题是关于如何利用CSS来实现这...

    CSS自动换行

    3. **隐藏溢出内容(Firefox)** - 当使用`overflow: hidden;`属性时,超出容器的文本将被裁剪,不会出现滚动条。 - 示例代码: ```css #wrap { white-space: normal; overflow: hidden; width: 200px; } ...

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

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

    css之自动换行.pdf

    在CSS布局中,自动换行是一个常见的需求,特别是在处理文本内容时。文本可能会包含各种字符类型,如连续的数字、英文字符,甚至不同语言的文字。本文主要探讨如何使用CSS来解决自动换行的问题,特别是针对IE和Fire...

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

    2. `overflow: hidden`:当内容超出单元格宽度时,隐藏超出部分。 3. `word-break: keep-all`:此属性确保单词不会被断开,以保持原文本的完整性。 4. `text-overflow: ellipsis`:当内容被隐藏时,在末尾显示省略号...

    将td中文字过长的部分变成省略号显示的小技巧

    通过将这三个属性结合起来,当TD中文字长度超出单元格宽度时,文本就会在不换行的情况下被截断,并在末尾显示省略号。这样的显示效果既美观又能向用户直观地表明有内容被隐藏了。 这个技巧非常适合用于需要在固定的...

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

    当设置为auto时,如果容器不足以容纳所有内容,浏览器会提供滚动条,允许用户滚动查看隐藏的内容;当设置为hidden时,所有超出边界的文本都将被隐藏,不会显示出来,也不会提供滚动条。 对于表格元素的宽度处理,...

    css之自动换行实现代码

    在网页布局中,CSS(层叠样式表)为我们提供...`属性非常有用,特别是当需要隐藏超出表格宽度的内容时。需要注意的是,在使用这些属性时,要考虑到不同浏览器的兼容性问题,确保在主流浏览器中都能达到预期的换行效果。

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

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

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

    `属性来实现换行,如果要隐藏超出的内容,则可以使用`overflow:hidden;`属性。 例如,对于IE浏览器: ```html &lt;td style="word-break:break-all;"&gt;abcdefghigklmnopqrstuvwxyz***&lt;/td&gt; ``` 针对Firefox...

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

    这样可以确保内容不会影响整体布局,但这种方法并不能真正实现换行,只是隐藏了多余的内容。例如: ```css .tb { table-layout: fixed; } .td { overflow: hidden; } ``` 在表格的TD中使用`nowrap`样式,同时给...

    网页制作 TD也可以溢出隐藏显示

    传统上,TD中的文本在超出单元格宽度时会自动换行显示。但有时候,我们需要的是文本溢出时隐藏而不是换行,即实现溢出隐藏(overflow: hidden)的效果。 本文探讨了如何在TD中实现文本溢出隐藏的效果。由于早期的...

    CSS 之强制换行技巧

    CSS强制换行技巧主要解决的是当容器中出现连续的英文或数字时,由于它们不会自动换行,可能会导致容器被撑大而超出预期布局的问题。在CSS中,有多种方法可以实现强制换行,特别是在不同浏览器环境下,需要使用不同的...

    css表格单元格中的长文本如何实现自动换行

    这通常在处理英文和阿拉伯数字的连续文本时显得尤为重要,因为它们不像中文、日文等亚洲文字那样容易在视觉上自然换行。下面我们来详细探讨几种解决方案。 首先,对于div、p等块级元素,它们默认的`white-space`...

    CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现

    在本篇文档中,我们将深入学习如何使用CSS控制文本的显示方式,具体来说是如何实现当文本超出指定宽度时,在文本的末尾显示省略号,并且文本不换行。这种效果在网页设计中非常常见,它能够帮助我们优雅地处理那些...

Global site tag (gtag.js) - Google Analytics