今天项目中遇到这样的情况:
使用table呈现数据时,由于数据是很长的英文字母或者很长的数字时,如:wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww这个长英文字母不会自动换行,导致整个table表格的布局就乱了,将其他td的宽度都快挤没了。
上网查询原因,原来是因为字母之间没有空格,系统认为这是一个单词就不会自动换行。
解决办法:
办法一:
在<table>标签中加入:style="table-layout:fixed;" ,在需要强制换行的<td>标签中加入style="word-wrap:break-word"
办法二:
在需要强制换行的<td>标签中加入style="word-break:break-all"就可以了。
下面是一些css属性功能的用法:
word-wrap:normal和break-word两个值
normal:默认的属性值。(允许内容顶开指定的容器边界)
break-word:内容将在边界内换行(不截断英文单词换行,截断英文单词下面的属性才具备这个功能)
word-break:normal、break-all、keep-all三个值
normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行。注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示。
break-all: 强行换行,将截断英文单词
keep-all: 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示。
text-overflow: clip、ellipsis (文本溢出)
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时(超过width部分)显示省略标记(...)
white-space: normal、 pre 、nowrap (内容不换行)
normal: 默认。空白会被浏览器忽略。
pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap :文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止
相关推荐
导入 <groupId>org.xhtmlrenderer <artifactId>core-renderer <version>R8 直接根目录下新建包org.xhtmlrenderer.layout 覆盖jar
xhtmlrenderer 进行HTML转PDF,修改了core-renderer-R8的源码,兼容中英文换行,且保持对英文单词完整性,亲测可用。
解决DrawText中文字与字母之间自动换行
解决HTML转pdf 中文、数字、英文不能换行的问题,修改的源码包 重新计算了右边距
但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。 原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个...
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE...但是对于长串的英文,就不起作用。) word-break用来控制断词 三种取值: (1)normal (2)break-all(是断开单词。在单词到边界时,下个字母自
只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-...
ckeditor纯数字和纯字母不能换行问题
当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的...但是对于长串的英文,就不起作用。) word-break用来控制断词 三种取值: (1)normal (2)break-all(是断开单词。在单词到边界时,下个字母自动到下一
本的排版依据语言的不同会有一些格式上的要求,比如简体中文中类似逗号、分号等标点符号不会出现在一行的开头,对于英文来讲就是一个完整单词不会 在两行显示,浏览器会依据类似这样的原则来显示文本。但是由于网页...
即随便输入一些英文字母来进行测试或者留言什么的,(大多数情况下,这是个不符合实际情况的举动,但遇到了这个问题,我们就要想办法去解决啊)。 二、如何解决呢? 大家首先要知道一个东东,叫做CJK( Chinese, ...
当一串数字的时候,很多浏览器不能自动换行,所以可以借助js来实现。
大家都知道连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,下面是 CSS如何将他们换行的方法
关于换行、裁剪的一些CSS属性 word-wrap: normal | break-word ...break-all 以字母作为换行依据 keep-all 中英文下和normal相同 white-space: normal || pre || nowrap || pre-line || pre-wrap ||
解决 TextView 中文、英文、数字、符号 排版问题,注释很清晰,5分绝对值了,
break-word:它主要用来是控制是否将强制把单词换行,对于中英中文没有任何问题,但是对于长串的英文无效。 normal:英文单词不被拆开,它是默认值。 break-all,主要解决了长串英文的问题。主要用来是断开单词。在...
根据输入的字符串,对字符串中的元音字母字符数量进行统计,并输出统计好的元音字母数量和换行制表符数量,并可以统计连续出现两次的字符数量
介绍了ASP.NET Datagridview自动换行的代码,有需要的朋友可以参考一下,希望对你有所帮助
2.当英语字母处于破折号-前面时不允许换行,但允许在-后面换行,同时如果-后面是数字的话则不允许换行。 3.当左括号(后面接着英语字母或者数字时不允许换行,同时当英语字母或者数字紧挨着右括号)时不允许换行。 ...