`

解决td内容换行问题-兼容firefox ie

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<table border="1" width="200" style="table-layout:fixed;word-break:break-all;word-wrap:break-word;">
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td width="25%" style="word-break:break-all;">dff/ffffffffffffffffffffffffffffffffffffffffffffffffffffffffff-fffffddddd</td>
		<td width="50" style="word-break:break-all;">wwwwwwwwwwwwwwwww</td>
		<td width="100" style="word-break:break-all;">ddddddkkkjkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkddddddddddddddd</td>
	</tr>
	<tr>
		<td>asdfsssssssssssssssssss</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
</body>
</html>

 ie:

 

firefox



 

  • 大小: 16.3 KB
  • 大小: 29 KB
0
1
分享到:
评论

相关推荐

    兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行.

    3. 如果指定了宽度的`td`中的文本含有标点或空格,则可以在`td`内部嵌套一层`div`来解决问题。 4. 综上所述,为简化处理,推荐以下CSS规则: ```css div { white-space: nowrap; } ``` 当需要兼容IE中`td`的...

    支持IE和FF同时自动换行

    通过上述分析,我们可以看到,使用`&lt;table&gt;`元素结合特定的CSS属性可以有效地解决IE和FF等浏览器之间的自动换行兼容性问题。这种方法不仅简单易行,而且能够满足大部分实际应用场景的需求。当然,在现代Web开发中,...

    CSS自动换行

    本文将深入探讨五种不同的自动换行策略,这些策略不仅能够满足基本的自动换行需求,更重要的是它们具有良好的浏览器兼容性,能够在IE、Chrome和Firefox等主流浏览器中稳定运行。 ### 一、使用`white-space`和`word-...

    通过css样式控制单元格内超长文本自动换行.doc

    在实际开发中,我们可能会遇到不同的浏览器兼容问题,例如 Firefox 和 IE 的行为不同。因此,我们需要格外小心地处理这些问题,以确保我们的代码可以在不同的浏览器中正常工作。 使用 CSS 样式控制单元格内超长文本...

    css之自动换行.pdf

    本文主要探讨如何使用CSS来解决自动换行的问题,特别是针对IE和Firefox浏览器的差异。 首先,块级元素如`div`和`p`默认具有`white-space:normal`属性,这意味着当定义了宽度后,内容会根据需要自动换行。例如: ``...

    浏览器兼容问题

    **问题描述**:在 Opera 和 Firefox 中,`td` 的高度包含边框宽度,但在其他浏览器中并不包含。 **解决方案**:设置 `line-height` 和 `height` 相同。 ```css .table-cell { line-height: 20px; height: 20px; ...

    如何实现FireFox文本自动换行

    虽然Firefox对`word-wrap`和`word-break`的支持良好,但为了确保在不支持这些属性的浏览器(如旧版本的IE)中也能正常工作,你可以通过检测浏览器类型来决定是否应用JavaScript解决方案。例如,可以使用条件注释或`...

    前端处理浏览器兼容问题

    **问题**:在Opera和Firefox中,`&lt;td&gt;`的高度包含了`border`的宽度。 **解决方法**:通过设置`line-height`和`height`相等来统一表现。 ```css td { height: 30px; line-height: 30px; } ``` #### 八、div嵌套p...

    CSS实现table td中文字的省略与显示(兼容IE与FF、Chrome)

    CSS提供了优雅的方式来实现这一功能,同时兼容不同的浏览器,包括Internet Explorer (IE),Firefox以及Chrome。这里我们将详细探讨如何实现这一效果。 首先,我们来看标题和描述中提到的关键CSS属性: 1. `...

    素材收集问题

    .ie6-only { behavior: url(/path/to/ie-only.css); } ``` 或者使用条件注释: ```html &lt;!--[if IE 6]&gt; &lt;link rel="stylesheet" type="text/css" href="/path/to/ie6.css" /&gt; &lt;![endif]--&gt; ``` 2. **IE7 ...

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

    而对于Firefox浏览器,该问题较为复杂。由于Firefox没有提供直接的断行控制属性,处理连续英文和数字的溢出,可以采用将超出边界的字符隐藏或者为容器添加滚动条的方法。 例如: ```css #wrap { word-break: break...

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

    请注意,这种方法在非Webkit浏览器(如Firefox、IE)中可能无法正常工作,因此在实际应用中可能需要结合JavaScript库或条件注释来实现兼容性。 总结,通过CSS的`text-overflow: ellipsis`、`overflow: hidden`和`...

    css之自动换行实现代码

    在某些极端情况下,比如需要在Firefox中对`td`或`th`内的文本实现换行同时隐藏超出部分,可能会遇到`overflow: hidden;`不生效的情况。在这些情况下,我们可以考虑使用`overflow: auto;`或者不使用`overflow`属性...

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

    `可能会导致一些内容被隐藏,所以在使用时要仔细考虑,是否可以通过其他方法解决问题,比如调整布局或提供滚动条,以确保用户体验不会受到影响。 综上所述,通过合理使用CSS属性,可以较好地控制连续的英文或数字在...

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

    然而,在Firefox浏览器中,连续的英文字符和阿拉伯数字的断行问题并未得到解决。此时,我们可以选择隐藏超出边界的字符,或者为容器添加滚动条: ```css #wrap { word-break: break-all; width: 200px; overflow...

    纯CSS实现表头固定表格滚动条效果

    /* Firefox */ position: -ms-fixed; /* IE9 及以下 */ position: fixed; ... } #scrollableBody { ... -ms-overflow-style: -ms-autohiding-scrollbar; /* IE10+ 自动隐藏滚动条 */ } ``` 此外,为了让表头...

Global site tag (gtag.js) - Google Analytics