`
fs_fly
  • 浏览: 26173 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

如何让td 在显示只一行和显示多行间切换

    博客分类:
  • css
 
阅读更多

实例:如何让td 在显示只一行和显示多行间切换 
html:

<td id="abc" class="oneline">

css:

 .oneline{height: 14px;width:612px;display:inline-block;white-space:nowrap;overflow:hidden;}
 .autoline{height:auto;width:612px;word-wrap:break-word;overflow-y:auto;}

 

jquery:

$("#abc").removeClass("oneline");
$("#abc").addClass("autoline");

 

 

以下为转载:

============================================

强制不换行 div{white-space:nowrap;}
自动换行 div{ word-wrap: break-word; word-break: normal; }
强制英文单词断行 div{ word-break:break-all; } 


CSS设置不转行:
overflow:hidden 隐藏
white-space:normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象


设置强行换行
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

英文不换行
CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

 

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性
语法:
word-break : normal | break-all | keep-all
参数:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本


说明:
设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例: div {word-break : break-all; }

分享到:
评论

相关推荐

    vue控制多行文字展开收起的实现示例

    在Vue.js中,控制多行文字的展开与收起是一个常见的需求,特别是在处理长文本显示时。本示例提供了一种实现方式,通过CSS样式结合Vue的数据绑定和事件监听来达到这一目的。以下是对该实现的详细解释: 1. **CSS样式...

    jquery 伸缩表格 单击每个单元格最后一行实现伸缩

    在本文中,我们将深入探讨如何使用jQuery来实现一个伸缩表格功能,特别是在表格的最后一行上单击时可以展开或收起更多详情。这个功能在数据展示时非常实用,特别是当表格包含大量信息但屏幕空间有限时。让我们一起...

    JQuery 表格操作(交替显示、拖动表格行、选择行等)

    这里,`nth-child()`选择器用于选取每三行中的第一行和第二行,然后切换相应的CSS类。 3. **选择行**: 实现表格行的可选功能,可以通过监听行的点击事件来完成。当选中某行时,移除其他行的选中状态,并为当前行...

    JQuery实现可编辑的表格

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格,这在数据展示和用户交互方面具有广泛的应用。 首先,...

    jsp页面Table自动换行

    在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格需要在视觉上分成多行显示。在JSP中,这可以通过CSS样式和HTML属性来控制。 【描述】提到的“Linux文档”可能是...

    自考网页设计与制作试卷试题(四)(附答案).pdf

    21. **Fireworks知识**:Fireworks是一款网页图像编辑和矢量图形设计工具,试卷中提到的部分可能涉及其图片优化和导出设置,但具体选项未给出,无法详细展开。 这些知识点是网页设计与制作的基础,掌握它们有助于...

    网页设计单词.pdf

    `&lt;tr&gt;`定义表格行,`&lt;td&gt;`定义表格列。 6. 表单类标签: `&lt;form&gt;`定义表单,`name`属性为表单命名,`action`指定表单提交的地址,`method`定义提交方式,如`post`或`get`。`&lt;input&gt;`用于创建输入域,支持多种类型如...

    网页设计入门.pdf

    3.6 跨多行多列的表格:使用`&lt;colspan&gt;`和`&lt;rowspan&gt;`属性实现跨行跨列。 3.7 层:介绍了CSS中的定位和浮动,以及`&lt;div&gt;`标签用于创建层。 3.8 总结:回顾表格和层的使用技巧。 **第4章 表单** 4.1 简介:表单在...

    Dreamweaver怎么使用标签及代码设计表格?

    在网页设计领域,Adobe Dreamweaver 是一款广泛使用的集成开发环境(IDE),它提供了直观的可视化界面和直接的代码编辑功能。本教程将详细介绍如何在Dreamweaver中使用HTML标签和代码来创建表格。 首先,启动...

    iphone各种型号尺寸.docx

    标题中的"iphone各种型号尺寸.docx"可能是一个文档,包含了关于苹果iPhone各代型号的屏幕尺寸和设计规格。这个标题虽然没有直接关联到“cs”(计算机科学)标签,但我们可以推测讨论的是移动设备的硬件规格,这在...

    Jquery表格行全选反选

    创建一个包含thead和tbody的表格,thead中有一个全选的复选框,tbody中每一行都有一个复选框。 ```html &lt;th&gt;&lt;input type="checkbox" id="selectAll"&gt; &lt;!-- 其他表头列 --&gt; &lt;!-- 表格行数据 --&gt; ...

    2021-2022计算机二级等级考试试题及答案No.19017.docx

    因此,选项B包含了表格最基本的组成部分,即表格、行和单元格。 ### 2. 微型计算机主机概念 - **题目内容**:微型计算机的运算器、控制器及内存储器的总称是主机。 - **正确答案**:正确 - **解析**:微型计算机的...

    《计算机应用基础2-网页制作》(完整).pdf

    33. 换行有 和两种,前者只是行间换行,后者是段落换行。 34. DW的文本格式化包括字体、字号、颜色、对齐方式等的设置。 35. 页面属性对话框可直接修改文档标题。 36. 导入表格式数据文件通常为CSV格式。 37....

    Js 实现表格隔行换色一例

    在标签下,首先出现的标签代表表格的一个行(row),并且使用"class=b"来标识这一行,这可能是为了后续通过Js为不同行设置不同样式。接下来的几个元素,每行代表表格的一个数据行,其中一些单元格被设置为跨越多行...

    jQuery方法简洁实现隔行换色及toggleClass的使用

    在网页设计中,隔行换色是一种常见的视觉优化技巧,用于提高表格或列表的可读性。jQuery 提供了一种简洁的方法来实现这一效果,特别是通过使用 `toggleClass()` 函数。这个函数允许我们动态地切换元素的 CSS 类,...

    计算机应用基础二网页制作完整.pdf

    39. HTML中的、、&lt;td&gt;分别代表表格、行和单元格,用于定义表头。 40. 表格编辑包括合并、拆分单元格,调整列宽和行高。 41. 网页色彩使用RGB模型,安全色是网页浏览器普遍支持的颜色,色彩运用应考虑对比度和和谐...

    jquery 实现的全选和反选

    在提供的代码中,我们看到一个简单的 HTML 表格,其中每一行都有一个复选框,还有一个 ID 为 "btnOk" 的按钮,用于触发全选或反选的操作: ```html 选择 &lt;th&gt;Id 作者 &lt;!-- 多行数据 --&gt; &lt;td&gt;...

    Launch-Checklist-Form

    JavaScript通过`&lt;script&gt;`标签引入,可以操控DOM(Document Object Model)元素,实现与用户的交互,例如在用户完成某个任务后自动切换到下一个步骤。 【版本控制与Git】 由于文件名为"Launch-Checklist-Form-...

Global site tag (gtag.js) - Google Analytics