如果一个单词
写很长,会把表格
给撑破的,而管了的话就会拆开英文
单词.
防止表格被撑破
这个问题曾经有很多人提及的,后来在早期的版本里我也解决过,可是导致了英文词语被拆散换行,所以在做新的模板时没有加上控制此项的一些css
码。今天试验了一下,发现解决的方法很简单。
按照网上大多数文章的说法,只要在CSS中加入:
table {<br />
table-layout:fixed;word-break:break-all;word-wrap:break-word;}<br />
div{word-break:break-all;word-wrap:break-word;}
就可以解决表格和层被撑破,最初我也是这样做的。不过这样的代码会造成一个问题,你会发现英文词全部被截断了,这不符合英语的书写习惯也不利于阅读。
后来我发现上述代码改写一下就可以做到既防止表格/层撑破又防止单词断裂了。
如下:
代码
table {
table-layout: fixed;
word-wrap:break-word;
}
div {
word-wrap:break-word;
}
这也是现在我用的代码。
-----------------------------------------------------
根据 苏昱(Rainer Su) 的 CSS2中文手册
word-break版本:IE5+专有属性 继承性:有
语法:
word-break : normal | break-all | keep-all
取值:
normal : 默认值。允许在词间换行
break-all : 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用 break-all 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordBreak 。
示例:
div {word-break : break-all; }
应用于:
IE5.0+
word-wrap版本:IE5.5+专有属性 继承性:有
语法:
word-wrap : normal | break-word
取值:
normal : 默认值。允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生
说明:
设置或检索当当前行超过指定容器的边界时是否断开转行。
此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordWrap 。
示例:
div { word-wrap: break-word; word-break: break-all; }
注意这个
break-word : 内容将在边界内换行。如果需要,词内换行( word-break )也将发生
所以 word-wrap够用了,默认会不拆开单词换行,但是如果真有一个非常长的单词,比如上次某发错了版的史上最恐怖的12个英文单词,它也是会拆行的,这样避免了表格被撑坏。
不过这个没有被w3c作为css2的标准,所以Mozilla 不支持这个属性,如果大家都好好写英文单词就没事情,Firefox也是不拆开单词换行的,如果碰到有人写很长的单词,Mozilla Firefox就不会换行一直撑破了。
不知道css3会不会把这个属性接受进去,不过说实话,太BT的单词还好是...
分享到:
相关推荐
然而,在处理英文文本尤其是包含长单词或连续英文字符串时,自动换行可能会遇到挑战。本文将探讨如何有效地实现英文自动换行,并通过CSS属性如`word-wrap`和`word-break`来解决这一问题。 #### 二、CSS中的换行控制...
### 网页英文自动换行技术解析 #### 背景介绍 在网页设计与开发过程中,文本的排版是非常重要的一环。不同于中文文本,英文文本在默认情况下不会自动进行换行处理,这可能会导致长单词或URL超出显示区域而被截断...
尤其在处理英文文本时,由于英文字母之间的间距均匀,浏览器默认不会在单词中间自动换行,这可能会影响页面的布局美观,特别是在有宽度限制的容器中。在本例中,我们要探讨的是如何使用JavaScript来实现连续英文字符...
这是一段很长的文字,它会被自动换行,即使其中包含英文单词thisisaverylongwordthatwillbebroken. ``` 在这段代码中: - `table-layout:fixed;`:设置表格为固定布局模式,确保单元格的宽度不变。 - `word-...
1、解决HTML转pdf 中文、数字、英文不能换行的问题,修改的源码包 重新计算了右边距。 2、html转pdf 参考我的另外一篇博文https://blog.csdn.net/qq_38616723/article/details/125188407?spm=1001.2014.3001.5502
自动换行 复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre ...
解决HTML转pdf 中文、数字、英文不能换行的问题,修改的源码包 重新计算了右边距
这个问题通常出现在当一个英文单词与一个中文字符相邻时,由于英文单词内部不能断行,系统可能会在英文单词和中文字符之间进行换行,从而影响了布局的美观和阅读体验。为了解决这个问题,我们可以使用特定的设置或...
在CSS布局中,有时我们需要处理英文或数字内容在有限宽度的容器内自动换行的问题,尤其是在混合了中文和英文的情况下。这种情况可能导致元素超出其设定的宽度,而不是在适当的位置换行,这在不同浏览器间的表现可能...
本文将详细介绍`word-break: break-all`与`word-wrap: break-word`两种自动换行属性的区别及其应用场景。 #### 二、`word-break: break-all`详解 1. **定义与作用** - `word-break: break-all`是一个CSS属性值,...
xhtmlrenderer 进行HTML转PDF,修改了core-renderer-R8的源码,兼容中英文换行,且保持对英文单词完整性,亲测可用。
根据题目描述,我们需要实现一个功能:对包含中文、英文及特殊符号的字符串进行处理,使得当字符串过长时能够自动换行。具体来说,英文字符和数字占据半个汉字的位置,而中文字符和部分特殊符号(如中文标点)则占据...
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容器,不会自动换行 并且当数字或者英文中带有汉字时,会从汉字处换行,而纯汉字却可以自动换行。这个问题如何解决?先来认识...
但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远...div中英文自动换行 复制代码代码如下: <div style=”word-break:break-all;width:20px
导入 <groupId>org.xhtmlrenderer <artifactId>core-renderer <version>R8 直接根目录下新建包org.xhtmlrenderer.layout 覆盖jar
连续字符的CSS换行,主要用到CSS的word-break属性,为其添加:break-all参数,这样的话字符会适应规定的宽度而自动换行,实际上这就是CSS的强制换行功能。 复制代码代码如下:<title>连续字符的CSS换行代码</...
对于没有自然断点的连续文本,如一长串的英文地址或没有空格分隔的URL,GridView可能无法自动换行,从而导致单元格被拉伸,页面布局失真。 #### 二、强制换行(Forced Line Break) 为了解决长文本不换行的问题,...
`TextView`默认支持中文的自动换行,但对于英文字符,由于单词间的连接性,可能需要额外处理才能达到理想的效果。本篇将详细介绍如何在`TextView`中实现英文自动换行以及自定义View来优化英文显示。 首先,`...
这里我们将详细讨论如何实现强制不换行以及自动换行,并分析不同换行方式的区别。 1. **强制不换行并以省略号结尾** 当希望文本在容器内不换行且超出部分以省略号表示时,可以使用以下CSS样式: ```css div { ...