`

td 不换行隐藏多余部分

    博客分类：
  • CSS
IEFirefox浏览器CSSGmail 
阅读更多

在论坛看到的，记录一下

 

http://www.yici.net/content/text_all/text_0/311_1.html 写道
table-layout:fixed 属性的解说

如果想要一个table固定大小，里面的文字强制换行(尤其是在一长串英文文本，并且中间无空格分隔的情况下)，以达到使过长的文字不撑破表格的目的，一般是使用样式：table-layout:fixed。但是在Firefox下面，会有一些问题，参考 Gmail的一些做法，做了几个测试，得出一种解决办法。
例1：(IE浏览器)普通的情况
CODE:
<table border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：
可以看到width=80并没有起作用，表格被字符撑开了。

例2：(IE浏览器)使用样式table-layout:fixed
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：
width=80起作用了，但是表格换行了。


例3：(IE浏览器)使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：width=80起作用了，换行也被干掉了。

例4：(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：不幸发生了，第一个td的nowrap不起作用了

例5：(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果：改成百分比，终于搞定了

例6：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果：把例5放到firefox下面，又ft了

例7：(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
CODE:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style><table class=tbl border=1 width=80><tr><td width=25% class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>

效果：天下终于太平了

例8：(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
CODE:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style>


CODE:
<table class=tbl border=1 width=80><tr><td width=20 class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>

效果：nowrap又不起作用了


最终，例7是一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案。
 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style> 
table {
	width:300px;
	table-layout:fixed;
	border:1px solid red;
	} 
td {
	white-space:nowrap;
	overflow:hidden;
	border:1px solid red;
	}
</style> 
<table> 
<tr> 
<td> 
[没有解决!重新提出]怎么用a1111111111aaa CSS强制TD不换行
</td> 
<td> 
[没有解决!重新提出]怎么用aaaa CSS强制TD不换行
</td> 
</tr>
</table>
分享到：
| 页面顶端空白问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css之自动换行.pdf

    `配合`word-break`或`word-wrap`来控制内容换行和隐藏多余内容。例如： ```html &lt;td&gt;abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss&lt;/td&gt; ``` Firefox浏览器则需要同时使用`table-layout: fixed;`、`...

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

    来强制固定表格宽度，超出表格部分的内容将被隐藏。这种方法适用于表格内容长度不一，且需要在固定宽度下完整显示表格标题或者摘要信息的情况。在td或th元素中，同样可以使用word-wrap和word-break属性来控制内容...

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

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

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

    `属性来强制表格的宽度，同时隐藏超出指定宽度的多余内容。而Firefox浏览器则需要在`&lt;td&gt;`和`&lt;th&gt;`元素内使用`word-break:break-all;`或`word-wrap:break-word;`属性来实现换行，如果要隐藏超出的内容，则可以使用`...

    用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大

    `并指定表格宽度，多余内容会被隐藏： ```html &lt;td&gt;abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss&lt;/td&gt; ``` 2. 同样在IE浏览器中，我们可以为`td`或`th`设置`word-break: break-all;`或`word-wrap: ...

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

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

    CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    综上所述，通过设置 `text-overflow`、`overflow` 和 `white-space` 属性的组合，我们可以控制CSS中文本溢出的显示方式，使内容在超出指定宽度后能够隐藏多余部分，并用省略号来提示用户还有更多内容。这在进行Web...

    layui表格内容溢出的解决方法

    3. 上述样式配合，使得文本内容超出指定宽度时，自动隐藏多余的文本，并以省略号显示。 在HTML结构上，具体的实现方式如下： ```html 序号 文章标题 文章内容 发布时间 发布人 操作 ${...

    Web前端开发技术-操作元素.pptx

    - `innerText`: 它用于设置或获取元素的纯文本内容，会去除HTML标签并处理多余的空格和换行。例如，`element.innerText = '新文本'`将仅替换元素内的文本，不包含任何HTML。 - `textContent`: 此属性用于设置或...

    freemarker总结

    其它的运行符可以作用于数字和日期,但不能作用于字符串,大部分的时候,使用gt等字母运算符代替&gt;会有更好的效果,因为 FreeMarker会把&gt;解释成FTL标签的结束字符,当然,也可以使用括号来避免这种情况,如:(x&gt;y)&gt; ...

    js使用小技巧

    根据鼠标获得元素： document.elementFromPoint(event.x,event.y).tagName=="TD document.elementFromPoint(event.x,event.y).appendChild(ms) 窗体图片 document.images[索引] 窗体事件绑定 document....

    关于table表格中的内容溢出布局方法

    1. `white-space: nowrap`: 这个属性强制文本在同一行显示，不进行换行。这对于保证内容在一个固定宽度的单元格内显示尤为重要。 2. `overflow: hidden`: 此属性将超出元素边界的内容隐藏，避免内容溢出表格单元格。...

Magicbox
Global site tag (gtag.js) - Google Analytics