HTML有趣的文本不自动换行问题 - helloyesyes - ITeye博客

`

helloyesyes

浏览: 1305817 次
性别:
来自: 武汉

最近访客更多访客>>

u012363178

一溜烟儿的跑

myredapple001

OliveExcel

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (1237)

社区版块

存档分类

最新评论

flowershade： javabean到底包不包含业务逻辑?
JavaBean总结
ahwoniu7：很强大呀
北京工作这几年 – 一个软件工程师
YYang5968：有些不明白是什么意思,不过我想也不需要很明白吧,会用就行了,呵 ...
MySQL数据类型简介
<>++<： zhufeng1981 写道huang_yong 写道感觉还是 ...
Java 枚举7常见种用法很好的文章
<>++<： >JDK1.5引入了新的类型——枚举枚举1.2就有了后 ...
Java 枚举7常见种用法很好的文章

HTML有趣的文本不自动换行问题

HTML CSS IE 浏览器

阅读更多

今天同事做一个文本自动换行的效果。比如一个字符串"12345678901234567890"，由于宽度只有50px，所以想到达到以下这样的效果

123456
789012
345678
90

HTML代码如下：

<TABLE border=1>
<TR>
<TD width=50px>12345678901234567890</TD>
</TR>
</TABLE>

以前自己理解的是缺省就会自动换行，结果测试总不成功，真是郁闷，难度和字符串有关。

果然，字符串"我想回家我想回家"又可以换行成功。

于是仔细分析了一下，终于理解了，原因IE浏览器的缺省换行是不会断开单词的，"12345678901234567890"字符串中间没有任何分隔符，所以它认为是一个不可断开的单词，因此以不换行处理。字符串"我想回家我想回家"有汉字，词法解析时认为双字节字符都可以分开，所以就正确换行了。

如果在字符串中间加一个空格也行，但是逗号不行。

查了一上css参考手册，如果要强制换行的话，可以设置对象的CSS属性word-wrap="break-word"，或者设置word-break="break-all"

测试代码如下所示

<HTML>

<HEAD>

</HEAD>

<BODY>

<TABLEborder=1>

<TR>

<TDwidth=50px>12345678901234567890</TD>

</TR>

</TABLE>

<br/>

<TABLEborder=1>

<TR>

<TDwidth=50px>我想回家我想回家</TD>

</TR>

</TABLE>

<br/>

<TABLEborder=1>

<TR>

<TDwidth=50px>12345678901234567890</TD>

</TR>

</TABLE>

<br/>

<TABLEborder=1>

<TR>

<TDwidth=50pxstyle="word-wrap:break-word">12345678901234567890</TD>

</TR>

</TABLE>

<br/>

<TABLEborder=1>

<TR>

<TDwidth=50pxstyle="word-break:break-all">12345678901234567890</TD>

</TR>

</TABLE>

</BODY>

</HTML>

分享到：

windows如何在cmd命令行提示符中显示当前 ... | Oracle在Windows系统中出现的ORA-27100: s ...

2008-09-04 18:12
浏览 1181
评论(0)
查看更多

评论

发表评论

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

相关推荐

canvas绘制文本内容自动换行的实现代码: 总之，通过自定义的`textPrewrap()`函数，我们可以实现Canvas上的文本自动换行，适应不同长度的文本，并能根据需求限制显示的行数。这在创建动态的、可自适应的Canvas内容时非常有用。希望这个例子对你有所帮助，并...

IText html转pdf 解决中文自动换行问题: 1、解决HTML转pdf 中文、数字、英文不能换行的问题，修改的源码包重新计算了右边距。 2、html转pdf 参考我的另外一篇博文https://blog.csdn.net/qq_38616723/article/details/125188407?spm=1001.2014.3001.5502

html中表格td内容自动换行: 这将解决长串英文字母不能自动换行的问题和 TD 中汉字自动换行问题。总结在这里，我们讨论了如何使用 CSS 来控制 TD 中的换行。我们学习了强制不换行和强制换行的实现方法，并介绍了相关的属性和实例。

Jlabel实现内容自动换行简单实例: 在实际开发中，我们经常需要在JLabel中显示较长的文本，然而JLabel默认情况下不会自动换行，这将导致文本溢出或难以阅读。因此，这篇文章将介绍如何实现JLabel中的内容自动换行。实现自动换行的关键在于计算文本的...

文本框自动换行: 在许多应用场景中，例如聊天应用、编辑器或表单填写，我们需要实现文本框的自动换行功能，使得当用户输入的字符超过一行的宽度时，文本能够自动跳转到下一行，就像微信的输入框那样。这个特性对于提升用户体验至关...

flex重载Button 文本自动换行: 本文将详细介绍如何重载Flex的Button，实现文本自动换行的功能。 1. Flex基础 Flex是一种流行的前端布局模式，它允许开发者在容器内动态调整子元素的位置和大小，以适应不同的屏幕尺寸和设备。在Flex布局中，每个...

英文自动换行怎样解决: 然而，在处理英文文本尤其是包含长单词或连续英文字符串时，自动换行可能会遇到挑战。本文将探讨如何有效地实现英文自动换行，并通过CSS属性如`word-wrap`和`word-break`来解决这一问题。 #### 二、CSS中的换行控制...

文本显示控件，支持长英文字符串自动换行: 为了解决这个问题，开发者可能需要使用`setWordWrap(true)`方法开启自动换行功能，或者选择更适合显示长文本的控件，例如`TextEdit`。 `TextEdit`是Qt库中一个更灵活的文本编辑组件，不仅支持显示文本，还允许用户...

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

网页英文自动换行代码: 为了解决英文文本在网页中的自动换行问题，可以通过CSS（层叠样式表）来控制文本的显示效果。下面将详细介绍涉及到的相关CSS属性及其用法： ##### `word-break: break-all;` 该属性用于规定是否允许单词内部断行。`...

通过css样式控制单元格内超长文本自动换行.doc: 今天，我们将讨论如何使用 CSS 样式控制单元格内超长文本自动换行，并解决浏览器兼容问题。单元格自动换行问题是 Web 开发中常见的问题，特别是在表格中显示大量文字时，超长文本可能会溢出单元格，影响页面的美观...

CSS 文字自动换行: 在Web开发中，实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能，并特别关注了对老旧浏览器如IE6和IE7的支持。 #### 知识点二：白空间处理属性 `white-space...

表格自动换行主义CSS属性: 在网页设计和开发过程中，为了更好地控制表格布局和文本显示效果，使用CSS来实现表格内的文本自动换行是一项非常实用的技术。标题中的“表格自动换行主义CSS属性”意在强调通过CSS来实现表格内文本自动换行的能力。 ...

html转pdf的core-renderer.jar支持中文自动换行: `core-renderer.jar` 是一个专为此目的设计的Java库，它能够将HTML内容转换成PDF，并且针对中文字符提供自动换行功能，同时还能保留CSS样式，从而保持原始网页的视觉效果。 1. **HTML转PDF**: HTML是一种标记语言，...

动态添加标签与自动换行: 总之，动态添加标签与自动换行是前端开发中不可或缺的部分，它们涉及到HTML、CSS和JavaScript的综合运用，旨在提供更佳的用户体验和适应性。通过理解并熟练掌握这些知识点，开发者能够构建出更加灵活和可扩展的网页...

可编辑并且能够自动换行的div: 标题所提到的“可编辑并且能够自动换行的div”，实际上是在讨论如何创建一个具有文本编辑功能的 `div` 元素，并且在用户输入文字时能自动换行，保持其形状不变。这涉及到 HTML、CSS 以及可能的 JavaScript 技术。 ...

html代码实现文字转图片的代码，自动换行: 我们使用了html2canvas库将id为text的div元素转换为canvas元素，并将canvas元素转换为...同时，我们使用了CSS样式控制文字的换行。最后，我们在页面上添加了一个按钮，点击按钮即可将文字转换为图片并显示在页面上。

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

html 自动换行: 在HTML页面布局中，自动换行功能对于确保文本内容能够适应不同的屏幕尺寸和容器大小至关重要。通过合理的设置，可以实现良好的阅读体验，尤其是在响应式设计中更为关键。本文将详细介绍`word-break: break-all`与`...

关于Textarea的换行问题: 值得注意的是，虽然这段代码提供了在Java环境中处理TextArea换行问题的一个具体示例，但在实际开发中，换行处理还可能涉及更复杂的逻辑，例如自动换行、软换行与硬换行的区别、换行符的编码和解析等。在不同的应用...

Global site tag (gtag.js) - Google Analytics