`
tk_zhang
  • 浏览: 232031 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

HTML表格中英文和数字换行问题

    博客分类：
  • Html
HTML单元测试IE 
阅读更多

     由于项目的需要，其中一个属性的值不能超过50个字符限制，在测试的时候发现table中只能显示大概20多个字符，其余的都被遮盖掉了，故搜寻了一下解决方案，以备下次再用。

      我的测试程序如下：

<html>
	<head>
		<title>
			测试英文和数字表格换行
		</title>
	</head>
	<body>
		<table style="table-layout:fixed;word-break:break-all" width="100%" border="0" cellspacing="0" cellpadding="5" >
			<tr>
				<th>值</th>
				<th>含义</th>
				<th>更新时间</th>
				<th>操作人</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>测试</td>
				<td>ABCDGFHGJYABCDGFHGJYABCDGFHGJYABCDGFHGJYABCDGFHGJY</td>
				<td>2009-09-18 15:43:24</td>
				<td>某人</td>
				<td>换行<td>
			</tr>	
</table>
	</body>
</html>

 这里说明一下其中style属性中的语法：

table-layout :auto | fixed

 参数：

auto    ：  缺省设置. 列宽将设置为不可分割的最大的内容的宽度。
fixed   ：  表的宽度和列的宽度固定，不随单元格中内容而改变
           1、设置了各个列的宽，没有设表的宽：表的宽度等于各个列的宽度和
           2、设置了表的宽度，没有设各个列的宽度：各个列的宽度平均分配
           3、要是都没设置宽度：表的宽度为100％，各个列的宽度平均分配

 

word-break   :   normal   |   break-all   |   keep-all

 

参数：

normal      :   　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行  
break-all   :   该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任 意字内断开。该值适合包含一些非亚洲文本的亚洲文本  
keep-all    :   　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

 注意：该语法仅适用于IE内核，对火狐不兼容！

4
顶
1
踩
分享到：
| 什么是JSON?
评论
发表评论

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

相关推荐

    Html转pdf 解决中文、数字、英文换行问题

    解决HTML转pdf 中文、数字、英文不能换行的问题，修改的源码包 重新计算了右边距

    Html解决pdf导出出现的中文数字等不换行等问题

    Html解决pdf导出出现的中文数字等不换行等问题, 已重新修改了Jar包, 重新打包好了,可直接使用,亲测好用.

    itext生成pdf解决中英文换行问题

    导入 &lt;groupId&gt;org.xhtmlrenderer &lt;artifactId&gt;core-renderer &lt;version&gt;R8 直接根目录下新建包org.xhtmlrenderer.layout 覆盖jar

    itext 将html转pdf中文显示换行以及字体问题

    1、itext将静态html转pdf中文显示及换行问题 2、itext将静态html转pdf 字体问题 3、html转pdf 参考我的另外一篇博文https://blog.csdn.net/qq_38616723/article/details/125188407?spm=1001.2014.3001.5502

    在表格加样式解决表格中英文和数字不能换行

    综上所述，通过合理运用CSS的 `word-wrap`、`word-break` 和 `white-space` 属性，我们可以解决表格中英文和数字不能换行的问题，提高表格内容的可读性和布局的灵活性。在实际应用中，根据具体情况选择合适的样式...

    文本显示控件，支持长英文字符串自动换行

    在描述中提到的问题，QLabel在Qt库中虽然功能强大，但在默认配置下不支持长串英文的自动换行。为了解决这个问题，开发者可能需要使用`setWordWrap(true)`方法开启自动换行功能，或者选择更适合显示长文本的控件，...

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

    自动换行问题，正常字符的换行是比较合理的，而连续的数字和英文字符常常将容器撑大，挺让人头疼。下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的...

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

    在网页设计中，表格和单元格的布局经常遇到一个问题，那就是连续的英文单词或中文字符会将容器撑大，导致表格的样式不符合预期。为了解决这一问题，我们可以利用CSS来实现强制换行，确保内容不会溢出容器。本文将...

    CSS实现连续数字和英文的自动换行的方法

    3. `table-layout`: 在表格中处理连续英文和数字的换行问题时，使用`table-layout: fixed;`可以强制表格使用固定的布局算法，这样就能预知每列的宽度，并在需要时强制换行，或者隐藏超出部分的内容。 4. `overflow`...

    table中td内容换行问题

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

    CSS 之强制换行技巧

    需要注意的是，虽然这些方法可以解决连续英文或数字导致的换行问题，但是在实际应用中可能需要根据具体的布局和效果来调整CSS属性值。此外，不同浏览器对CSS的支持可能会有差异，所以在设计布局时应该充分测试在主流...

    HTML标签英文单词

    它通常与 `&lt;colgroup&gt;` 结合使用，以便对表格中的列进行分组和设置样式。 ### &lt;colgroup&gt;: Column Group `&lt;colgroup&gt;` 标签用于对表格中的列进行分组。它可以用于应用样式属性到一组列上。 ### &lt;dd&gt;: Definition ...

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

    在IE浏览器中，连续的英文字符和阿拉伯数字可能会导致容器宽度异常。在这种情况下，可以使用`word-wrap:break-word;`或`word-break:break-all;`属性来强制断行，使得长字符串可以被拆分并在必要时换行显示。 例如：...

    ASP.NET Datagridview自动换行的小例子

    在HTML和CSS中，`word-break`和`word-wrap`属性是用来控制文本换行的关键。默认情况下，Datagridview的单元格会尽可能地显示完整单词，而不是在单词内部进行换行，这可能导致长单词或长字符串无法完全显示。我们可以...

    css自动换行 防止撑破div影响排版

    总结来说，通过合理使用CSS中的`white-space`、`word-wrap`、`word-break`以及`overflow`属性，可以有效地解决连续英文字符和数字导致的自动换行问题，防止内容撑破容器，保持页面布局的整洁和一致性。对于不同...

    asp.net gridview强制换行

    `word-break: keep-all`确保英文单词不会在内部进行换行，而`word-wrap: normal`则表示只有在遇到空格或非字母数字字符时才会换行。这样的设置对于展示英文或不允许单词拆分的语言特别有用，保持了单词的完整性。 2...

    HTML语言介绍.ppt

    HTML中的元素由标识符（如`和`&gt;`）以及英文单词或字母构成，分为成对和不成对两种。成对元素如`&lt;p&gt;`和`&lt;h1&gt;`等，分别代表段落和不同级别的标题。标题从`&lt;h1&gt;`到`&lt;h6&gt;`共六级，`&lt;h1&gt;`最大，`&lt;h6&gt;`最小。单个元素如`...

    HTML语言课件[归纳].pdf

    编写代码时，注意文件名和文件夹使用英文、单词、字母、数字的组合，并保持良好的代码缩进格式。 HTML的基本标记还包括`&lt;a&gt;`用于创建链接，`&lt;img&gt;`插入图像，`&lt;ul&gt;`、`&lt;ol&gt;`和`&lt;li&gt;`创建无序或有序列表，`&lt;table&gt;`...

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