`
zzc1684
  • 浏览: 1223008 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

table中强制不换行

阅读更多

总是一些文章说要强制换行,很少提到说如何不换行。

一般都会使用word-break: keep-all;使得强制不换行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<title>I don't want to have a new line
</title>

<meta name="description" content="">
<meta name="author" content="Yinkan">

<link rel="stylesheet" href="./style.css" type="text/css" media="screen">

</head>


<body>
<table>
    <tr>
        <td>不换行不换行不换行不换行 不换行不换行不换行不换行不换行不换 行不换行不换行不 换行不换行不换行不换行不换行不换行不换行不换行</td>
        <td>1111</td>
    </tr>
    <tr>
        <td>222</td>
        <td>2222</td>
    </tr>
</table>
</body>

</html>

 

table{width:100%;border:1px solid #999;}
table td{word-break: keep-all;}

 

 这在IE下可以用,但是在FireFox和Chrome下是无法达到预期效果的。

 

需要使用 white-space:nowrap;

table{width:100%;border:1px solid #999;}
table td{word-break: keep-all;white-space:nowrap;}

 能显示正常(或者说,不正常,因为会打破原有的布局,并且突破父级元素的宽度)。

 

在TR里设置nowrap="nowrap"属性即可
如<table width="200" border="1">
  <tr nowrap="nowrap">
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

 

分享到:
评论

相关推荐

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

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

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

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

    html中表格td内容自动换行

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

    CSS对表格单元格强制换行和不换行

    CSS控制Table单元格强制换行与强制不换行  我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。  近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个...

    table中td内容换行问题

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

    CSS强制单元格换行

    &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;...&lt;/td&gt;

    jsp强行给表格换行

    为了解决这些问题,可以通过设置CSS样式来强制表格中的内容进行换行。本文将详细介绍如何通过CSS属性和JavaScript脚本来实现这一功能。 #### CSS解决方案 在CSS中,可以使用`table-layout`和`word-break`两个属性...

    CSS 之强制换行技巧

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

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

    本篇文章主要探讨的是如何处理HTML页面中的强制换行问题,特别是当表格大小固定,内部文字过长,且没有空格分隔时,如何避免文字撑破表格的边界。这个问题在不同的浏览器中可能有不同的表现,因此需要一些跨浏览器的...

    javascript 使td内容不换行不撑开

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

    CSS自动换行

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

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

    为了解决这一问题,我们可以利用CSS来实现强制换行,确保内容不会溢出容器。本文将详细介绍如何通过CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大。 首先,对于普通的`div`、`p`等块级元素,它们的...

    深入解析HTML的table表格标签与相关的换行问题

    这对于需要强制换行且不破坏表格结构的情况特别有用,特别是当单元格内有长串无空格的文本时。 `&lt;thead&gt;`, `&lt;tfoot&gt;`, 和`&lt;tbody&gt;`是HTML表格的分组标签,它们分别用于定义表格的头部、尾部和主体。这些标签有助于...

    css之自动换行.pdf

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

    SAP SmartForms Template-Table-Loop-Command

    它允许开发者在输出过程中插入特定指令,如%PAGE_BREAK,用于强制在数据达到一定量时开始新的页面。此外,Command还可以用于控制输出的顺序和条件,增加SmartForms的灵活性和控制力。 #### 示例代码片段 为了更...

Global site tag (gtag.js) - Google Analytics