`

表格单元格内文字换行效果(CSS)

    博客分类:
  • web
css 
阅读更多

若使表格单元格内容换行则:

.td { word-break : break-all ; word-wrap : break-word ;}

对表格单元格设置如上效果后,对中文或者英文内容都可以正常换行,但是若内容为一个超长数字或字母组成的,则表格单元格就被撑开很长,没有发生换行的效果,此时,将表格的 width 进行设置, 同时对表格设置表格布局为固定及 table-layout : fixed ;

例如:<table border="0" style="width: 90%;table-layout: fixed;" >


语法:

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

取值:

normal

:  

默认值 。允许在词间换行

break-all

:  

该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all

:  

与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用 break-all
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordBreak

语法:

word-wrap : normal | break-word

取值:

normal

:  

默认值 。允许内容顶开指定的容器边界

break-word

:  

内容将在边界内换行。如果需要,词内换行(word-break ) 也将发生

说明:

设置或检索当当前行超过指定容器的边界时是否断开转行。
此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 wordWrap

分享到:
评论

相关推荐

    表格自动换行主义CSS属性

    这里提到的“三种参数不同形式”即指不同的CSS属性组合方式,用于实现文本在表格单元格中的换行行为。 #### CSS属性详解 为了实现表格内文本的自动换行,可以使用以下几种CSS属性: 1. **`table-layout`** - **...

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

    正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 复制代码代码如下: ”wrap”&gt;正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当...

    PHP生成excel时单元格内换行问题的解决方法

    },Excel就能正确理解" "标签的意思,从而在单元格内实现换行效果。 最终,通过这种方式修改后,Excel能够正确地在单元格内显示换行。这不仅解决了客户的问题,也使得数据复制粘贴时不会出现问题,因为它避免了...

    table 中,如何使得单元格的内容不换行,单元格不被撑开,显示不下的时候在结尾处显示“...”

    总结,要让表格单元格内容不换行,单元格不被撑开,并在显示不下的时候在结尾处显示“...”,你需要通过CSS设置`white-space`、`overflow`和`text-overflow`属性,并为单元格设定一个固定的宽度。同时,确保所有可能...

    CSS 文字自动换行

    ### CSS文字自动换行 #### 知识点一:CSS自动换行的原理与方法 在Web开发中,实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能,并特别关注了对老旧浏览器...

    java 写的转pdf代码,支持表格内容的中文换行

    在处理中文换行时,PDF生成器需要正确地识别和处理中文字符集,如UTF-8,并确保在遇到长句子时,中文字符可以在表格内适当地换行,而不破坏表格的结构。这通常需要对字体、排版规则以及文本渲染有深入的理解。 CSS...

    通过css样式控制单元格内超长文本自动换行.doc

    使用 CSS 样式控制单元格内超长文本自动换行的方法是,我们可以在单元格中添加一个 `&lt;p&gt;` 标签,并设置其宽度,然后将文字放入 `&lt;p&gt;` 标签内。这样,在不同的浏览器中,单元格的内容都可以自动换行。 下面是一个...

    CSS自动换行

    以上介绍的自动换行策略覆盖了从基本的文本换行到复杂布局中的自动调整,通过合理选择和组合这些CSS属性,开发者可以轻松应对不同场景下的自动换行需求,同时确保页面在各种浏览器中都能呈现出一致且美观的效果。...

    css文字换行

    最后,对于“组织部评分”这个文件名,尽管它与“css文字换行”主题没有直接关系,但在实际应用中,你可能会遇到需要在表格或者评分系统中使用CSS控制文字换行的情况。例如,你可能需要确保评分不会溢出评分单元格,...

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

    本文将详细介绍如何通过CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大。 首先,对于普通的`div`、`p`等块级元素,它们的默认样式`white-space`是`normal`,这意味着元素内的文本会在适当的地方自动...

    td 内容自动换行 table表格td设置宽度后文字太多自动换行

    本篇文章针对的就是这个常见的问题,即如何设置表格单元格宽度后,当内容太多无法完整显示时,可以实现自动换行的效果。 在HTML中,表格的布局和样式控制通常依赖于CSS。为了实现内容的自动换行,我们需要对table和...

    jsp页面Table自动换行

    `可以使单元格内的内容在单词边界处换行,避免溢出。`table-layout: fixed;`可以让表格根据预先设定的列宽分配空间,避免内容过长导致的换行。 3. **Linux命令**:如`ls`用于列出目录内容,`cd`用于切换目录,`grep...

    css控制文本实现越界省略号以及自动换行

    这样,表格的每一列都将保持固定宽度,当单元格内的文本超出时,会显示省略号。 总结来说,CSS中的`text-overflow: ellipsis`、`overflow: hidden`和`white-space: nowrap`等属性是实现文本越界省略号的关键,而`...

    div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...

    当内容在容器内宽度不足以完整显示时,浏览器默认会将文字换行,但是有些时候我们不希望文字进行换行显示,而是希望超出容器宽度的部分不显示或者使用省略号来代替。对于这类需求,可以通过CSS来实现。 在CSS中,...

    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之自动换行.docx

    在CSS(层叠样式表)中,自动换行是一个关键的概念,它涉及到如何处理文本在容器内的布局,特别是在有限的空间内。本篇文章将深入探讨如何使用CSS来控制文本的换行,尤其是对于div、p这样的块级元素以及表格中的文本...

    html、css 禁止文字自动换行属性word-break

    然而,在某些情况下,比如在固定宽度的`&lt;td&gt;`(表格单元格)内,如果单词过长,可能就会导致表格的布局被破坏。这时,就需要使用`word-break`属性来控制文本的换行行为。 `word-break`属性有几个值可选: 1. `...

    CSS制作好看的表格

    根据提供的标题“CSS制作好看的表格”以及描述“教你在短时间内,用css制作出新颖、独特漂亮的网页表格。使得你的网页表格更加清晰,美观。”本文将详细介绍如何利用CSS来设计美观且功能性强的网页表格。 ### 一、...

Global site tag (gtag.js) - Google Analytics