实例:如何让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.js中,控制多行文字的展开与收起是一个常见的需求,特别是在处理长文本显示时。本示例提供了一种实现方式,通过CSS样式结合Vue的数据绑定和事件监听来达到这一目的。以下是对该实现的详细解释: 1. **CSS样式...
在本文中,我们将深入探讨如何使用jQuery来实现一个伸缩表格功能,特别是在表格的最后一行上单击时可以展开或收起更多详情。这个功能在数据展示时非常实用,特别是当表格包含大量信息但屏幕空间有限时。让我们一起...
这里,`nth-child()`选择器用于选取每三行中的第一行和第二行,然后切换相应的CSS类。 3. **选择行**: 实现表格行的可选功能,可以通过监听行的点击事件来完成。当选中某行时,移除其他行的选中状态,并为当前行...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。本篇文章将深入探讨如何使用jQuery来实现一个可编辑的表格,这在数据展示和用户交互方面具有广泛的应用。 首先,...
在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格需要在视觉上分成多行显示。在JSP中,这可以通过CSS样式和HTML属性来控制。 【描述】提到的“Linux文档”可能是...
21. **Fireworks知识**:Fireworks是一款网页图像编辑和矢量图形设计工具,试卷中提到的部分可能涉及其图片优化和导出设置,但具体选项未给出,无法详细展开。 这些知识点是网页设计与制作的基础,掌握它们有助于...
`<tr>`定义表格行,`<td>`定义表格列。 6. 表单类标签: `<form>`定义表单,`name`属性为表单命名,`action`指定表单提交的地址,`method`定义提交方式,如`post`或`get`。`<input>`用于创建输入域,支持多种类型如...
3.6 跨多行多列的表格:使用`<colspan>`和`<rowspan>`属性实现跨行跨列。 3.7 层:介绍了CSS中的定位和浮动,以及`<div>`标签用于创建层。 3.8 总结:回顾表格和层的使用技巧。 **第4章 表单** 4.1 简介:表单在...
在网页设计领域,Adobe Dreamweaver 是一款广泛使用的集成开发环境(IDE),它提供了直观的可视化界面和直接的代码编辑功能。本教程将详细介绍如何在Dreamweaver中使用HTML标签和代码来创建表格。 首先,启动...
标题中的"iphone各种型号尺寸.docx"可能是一个文档,包含了关于苹果iPhone各代型号的屏幕尺寸和设计规格。这个标题虽然没有直接关联到“cs”(计算机科学)标签,但我们可以推测讨论的是移动设备的硬件规格,这在...
创建一个包含thead和tbody的表格,thead中有一个全选的复选框,tbody中每一行都有一个复选框。 ```html <th><input type="checkbox" id="selectAll"> <!-- 其他表头列 --> <!-- 表格行数据 --> ...
因此,选项B包含了表格最基本的组成部分,即表格、行和单元格。 ### 2. 微型计算机主机概念 - **题目内容**:微型计算机的运算器、控制器及内存储器的总称是主机。 - **正确答案**:正确 - **解析**:微型计算机的...
33. 换行有 和两种,前者只是行间换行,后者是段落换行。 34. DW的文本格式化包括字体、字号、颜色、对齐方式等的设置。 35. 页面属性对话框可直接修改文档标题。 36. 导入表格式数据文件通常为CSV格式。 37....
在标签下,首先出现的标签代表表格的一个行(row),并且使用"class=b"来标识这一行,这可能是为了后续通过Js为不同行设置不同样式。接下来的几个元素,每行代表表格的一个数据行,其中一些单元格被设置为跨越多行...
在网页设计中,隔行换色是一种常见的视觉优化技巧,用于提高表格或列表的可读性。jQuery 提供了一种简洁的方法来实现这一效果,特别是通过使用 `toggleClass()` 函数。这个函数允许我们动态地切换元素的 CSS 类,...
39. HTML中的、、<td>分别代表表格、行和单元格,用于定义表头。 40. 表格编辑包括合并、拆分单元格,调整列宽和行高。 41. 网页色彩使用RGB模型,安全色是网页浏览器普遍支持的颜色,色彩运用应考虑对比度和和谐...
在提供的代码中,我们看到一个简单的 HTML 表格,其中每一行都有一个复选框,还有一个 ID 为 "btnOk" 的按钮,用于触发全选或反选的操作: ```html 选择 <th>Id 作者 <!-- 多行数据 --> <td>...
JavaScript通过`<script>`标签引入,可以操控DOM(Document Object Model)元素,实现与用户的交互,例如在用户完成某个任务后自动切换到下一个步骤。 【版本控制与Git】 由于文件名为"Launch-Checklist-Form-...