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

td 强制不换行且 当超过td width 自动隐藏

 
阅读更多

1、给<table>加上style="table-layout:fixed";  
2、给<td>加上style="width:100px;text-overflow:ellipsis; word-break:keep-all; overflow:hidden;" 
js生成TABLE cell的时候,cell里文字过多的时候似乎以上方法也不太好用。可以直接这样: 
cell.innerHTML="<nobar>"+"文字"+"</nobar>"; 
强制不换行。

另一种方法

  <table   border=1   width=100>   
      
<tr><td><div   nowrap  style="width:100;overflow:hidden;">very loooooooooooooooooooooooooooooooong sentence</div></td></tr>   
      
<tr><td><div   nowrap  style="width:100;overflow:hidden;">very loooooooooooooooooooooooooooooooong sentence</div></td></tr>   
      
<tr><td><div   nowrap  style="width:100;overflow:hidden;">very loooooooooooooooooooooooooooooooong sentence</div></td></tr>   
      
<tr><td><div   nowrap  style="width:100;overflow:hidden;">very loooooooooooooooooooooooooooooooong sentence</div></td></tr>   
  
</table>

分享到:
评论

相关推荐

    html中表格td内容自动换行

    强制换行是为了遇到一些超长的连续字符串(比如 aaaaaaaaaaaaaaaa)时不撑大布局。我们可以使用 `word-break: break-all;` 来实现强制换行。 在 Firefox 中不支持 `word-break` 属性,所以我们需要加 `overflow: ...

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

    ### 兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行 在Web开发过程中,为了确保页面在不同浏览器中的一致性和兼容性,掌握正确的CSS技巧至关重要。本文主要探讨如何实现跨浏览器的强制不换行与强制换行功能...

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

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

    html td nowrap不换行属性使用方法

    `nowrap`是一个属性,当应用于`&lt;td&gt;`元素时,它会禁止单元格内的文本自动换行,确保所有内容都在同一行内显示,直到遇到表格的边界或下一个单元格。这个属性对于在有限空间内展示长字符串或避免单词在单元格内被截断...

    javascript 使td内容不换行不撑开

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

    CSS强制单元格换行

    &lt;td width="270px" class="newLine"&gt; &lt;label&gt;&lt;a&gt;http://download.csdn.net/user/zxy397472251&lt;/a&gt; &lt;a&gt;http://download.csdn.net/user/zxy397472251&lt;/a&gt; &lt;a&gt;http://download.csdn.net/user/zxy397472251&lt;/a&gt; &lt;a&gt;...

    table中td内容换行问题

    这样,当遇到连续的无间隔字符时,浏览器会在适当的地方强制进行单词内部的换行,确保内容不会溢出单元格。例如: ```html &lt;td&gt;;"&gt;lovelovelovelovelovelovelovelovelovelove&lt;/div&gt;&lt;/td&gt; ``` 2. **调整表格布局...

    CSS自动换行

    3. **单元格内部强制换行(IE/Firefox)** - 对于需要在单元格内部换行的情况,可以结合使用`white-space: nowrap;`和`word-wrap: break-word;`或`word-break: normal;`。 - 示例代码: ```css td { white-...

    CSS 之强制换行技巧

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

    css之自动换行.pdf

    `来强制换行。例如: ```css #wrap { word-break: break-all; /* 或者word-wrap: break-word; */ width: 200px; } ``` ```html &lt;div id="wrap"&gt;abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111 ``` 然而...

    css之自动换行实现代码

    对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html &lt;div id=wrap&gt;正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal...

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

    `来设定表格的宽度,并通过调整`td`或`th`的样式来实现强制换行: 1. 在IE浏览器中,设置`table-layout: fixed;`并指定表格宽度,多余内容会被隐藏: ```html &lt;table style="table-layout:fixed" width="200"&gt; ...

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

    当文本长度超过容器宽度时,超出部分会被隐藏,并在结尾处显示省略号。 接下来是自动换行的设置。如果你希望文本在遇到边界时自动换行以适应容器,可以使用`word-break`和`white-space`属性。以下是一个例子: ```...

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

    当定义了宽度之后,文本会自动换行。 在IE浏览器中,连续的英文字符和阿拉伯数字可能会导致容器宽度异常。在这种情况下,可以使用`word-wrap:break-word;`或`word-break:break-all;`属性来强制断行,使得长字符串...

    Html 页面的强制换行问题总结

     如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不 撑破表格的目的,一般是使用样式:table-layout:fixed。不过在Firefox下面,会有...

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

    在这种情况下,`nowrap`属性能够强制内容不换行。于是,连续的英文或数字可以在满足`table-layout:fixed;`的表格中实现换行。例如: ```css .tb { table-layout: fixed; } ``` 在实际应用中,如果单元格宽度是...

Global site tag (gtag.js) - Google Analytics