`

table中td内容自动换行

    博客分类:
  • WEB
 
阅读更多

网页开发过程中时常会遇到关于折行和不折行的问题。
比如连续英文或符号时,即使定义了宽度,文本还是没法折行,因为没有字符、字母里间隔的话,会当成一个单词。所以按不能折行来解析。
这时如果遇到了链接url,往往全是连续的英文和字母,这样就会把原本做好的页面搅乱。
而有的时候,我们希望强制不折行,或者某一链接不折行,或者折行时链接一起折行,而不会出现链接里两个字有断开的折行。

table-layout:   fixed          按照你定义的表格宽度或列宽显示数据,不受内容本身宽度影响。

1.(IE支持)

关键词:table-layout:   fixed   及   word-wrap:   break-word  
   
 

 <table   style="table-layout:   fixed"   width="200"   bgcolor="#f7f7f7">     <tr>       <td   style="word-wrap:   break-word">     AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA     </td>     </tr>     </table>2.(Firefox 或其他浏览器支持)

/* Browser specific (not valid) styles to make preformatted text wrap */  
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}转自:http://myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html
3.(Firefox支持)

<td><script language="javascript" type="text/javascript" defer="defer">javascript:(function(){var D=document; F(D.body); function F(n){var u,r,c,x; if(n.nodeType==3){ u=n.data.search(/\S/); if(u>=0) { r=n.splitText(u+10); n.parentNode.insertBefore(D.createElement("WBR"),r); } }else if(n.tagName!="STYLE" && n.tagName!="SCRIPT"){for (c=0;x=n.childNodes[c];++c)} } })();</script></td>4.IE5以下

word-wrap和white-space都可以控制,但对IE5就不起作用了。
在IE5下面控制元素折行应该使用这个 word-break : normal | break-all | keep-all

分享到:
评论

相关推荐

    html中表格td内容自动换行

    HTML 中表格 TD 内容自动换行 HTML 中让表格 TD 中的多余字体自动换行是前端开发中常见的问题。今天,我们将讨论如何使用 CSS 来控制 TD 中的换行。 强制不换行 在 IE 的 TD 中,如果我们没有指定宽度,使用 `...

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

    为了实现内容的自动换行,我们需要对table和td进行相应的样式设置。 首先,为了让表格的宽度固定,可以使用CSS属性`table-layout: fixed;`。这个属性用于定义表格宽度的计算方式。当设置为`fixed`时,表格的宽度由...

    jsp页面Table自动换行

    【标题】"jsp页面Table自动换行"涉及的是在JavaServer Pages (JSP) 技术中处理HTML表格(Table)的布局问题。在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格...

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

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

    table中td内容换行问题

    这个问题通常发生在用户输入了大量连续的无间隔英文字符,导致单元格(`&lt;td&gt;`)无法自动换行,从而破坏了表格的正常布局。 例如,用户输入像"lovelovelovelovelovelovelovelovelovelovelove"这样的字符串时,由于英文...

    表格自动换行主义CSS属性

    &lt;td&gt;这是一段很长的文字,它会被自动换行,即使其中包含英文单词thisisaverylongwordthatwillbebroken.&lt;/td&gt; &lt;/table&gt; ``` 在这段代码中: - `table-layout:fixed;`:设置表格为固定布局模式,确保单元格的宽度...

    IText Html生成PDF支持中文、英文和数字换行

    经过大牛修改后的core-renderer.jar,当把HTML转化成PDF时支持table的td中的中文、英文和数字自动换行,table必须添加样式table-layout:fixed;word-break:break-strict;

    通过CSS让TD自动换行

    为了使TD在内容过长时自动换行,我们可以利用CSS的`word-break`属性。`word-break`属性允许我们在特定条件下打破单词内部的连续性,进行换行。`word-break: break-all`是一个常用的值,它表示在任何字符处都可以进行...

    支持IE和FF同时自动换行

    本文将详细介绍一种通过使用`&lt;table&gt;`标签结合特定CSS属性的方式,来实现文本在Internet Explorer (IE) 和 Firefox (FF) 等浏览器中的自动换行效果。 #### 二、核心概念和技术背景 ##### 2.1 CSS自动换行相关属性 ...

    html转pdf,ITEXT转HTML为PDF解决中文不换行问题

    1、core-renderer.jar该jar包修改过中文不换行问题 public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){ String css = ""; css +="&lt;style&gt;"; css +="table{"; ...

    CSS自动换行

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

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

    另外,对于表格的自动换行,可以使用`table-layout: fixed`属性来设定固定布局,这将根据表格的宽度、边框、间距和列宽来决定表格内容的布局,而不依赖于内容本身。这通常能提高表格渲染的速度。 在跨浏览器兼容性...

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

    在上面的代码中,我们首先定义了一个 CSS 样式 `.tbl td`,它将单元格的内容设置为自动换行。然后,我们定义了一个 CSS 样式 `.tb1`,它将单元格的内容设置为自动换行。 在 HTML 代码中,我们添加了一个 `&lt;p&gt;` 标签...

    JSP中table的td标签迭代循环

    本篇内容将深入探讨如何在JSP中利用`&lt;logic:iterate&gt;`标签对数据进行迭代,并通过控制循环的行数来实现自动换行的功能。 #### 一、基本概念 1. **JSP**:JavaServer Pages是一种基于Java技术的标准服务器端应用...

    ASP.NET GridView中文本内容无法换行(自动换行/正常换行)

    如果你不希望这种自动换行发生,可以在页面后台的代码中添加以下样式设置: ```csharp GridView1.Attributes.Add("style", "word-break:keep-all;word-wrap:normal"); ``` 这将阻止GridView自动换行,保持单词的...

    javascript 使td内容不换行不撑开

    在默认情况下,如果单元格中的内容太长,它会自动换行并可能拉伸单元格的宽度。 为了防止`&lt;td&gt;`内容换行并撑开单元格,我们需要使用CSS来设定相应的样式。在提供的代码中,我们可以看到以下CSS规则: ```css table...

    css之自动换行.pdf

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

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

    1. **使用`word-wrap`和`word-break`解决`td`中无法自动换行的问题**: ```html &lt;table width="100%" border="0" cellspacing="1" cellpadding="0"&gt; &lt;td width="25%" style="word-wrap: break-word; word-break:...

Global site tag (gtag.js) - Google Analytics