9 Meta定义网页自动适配电脑或... :篇一上 下一篇: [转]淘宝商城鼠标经过区域变亮... :

 本日志标题：CSS强制不换行超过div或表格部分长度采用省略号        [2016-7-27]

场景描述：在条目列表中经常遇到，要求固定高度的一行文本，随着窗口页面的收缩或分辨率的调整，对该文本进行隐藏展示，超过部分采用省略号“...”来表示。

应用表现：在div中和table表格中会经常遇到，他们的处理方法不太相同。

DIV基本原理：三行CSS代码



1、white-space:nowrap;
white-space属性表示设置如何处理元素内的空白，
nowrap表示文本不会换行，文本会在在同一行上继续，直到遇到 <br/> 标签为止。


2、overflow:hidden;
overflow属性表示规定当内容溢出元素框时发生的事情
hidden表示内容会被修剪，并且其余内容是不可见的。

3、text-overflow: ellipsis;
text-overflow属性表示规定当文本溢出包含元素时发生的事情
ellipsis表示显示省略符号来代表被修剪的文本。




一句话：强制段落的文本不换行（满足条目列表的单行显示），超过部分隐藏不显示，隐藏部分采用省略号。


[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

表格的情况不太一样。
首先，超过长度采用省略号的需求是建立在“宽度”范围之内的，所以其前提是定义的“宽度”。（DIV的宽度默认是页面窗口宽度，table不同）
其次，表格宽度的默认情况是——表格列的宽度是由“列单元格中没有折行的最宽的内容设定的”，而文本在单元格中只要不换行则一直“撑下去”，超出页面窗口宽度并出现横向滚动条。
所以，我们需要让表格的宽度采用“列宽由表格宽度和列宽度设定”的方式，同时定义表格的“宽度”。



table{
　　table-layout: fixed;
　　width:100%;
}

table-layout: fixed
tableLayout 属性用来显示表格单元格、行、列的算法规则。
由于table-layout的默认值是auto，即table的列宽将取决于其内容的多寡。如果内容的体积无法估测，那么最终表格的呈现形式也无法保证。
fixed表示列宽由表格宽度和列宽度设定。



然后对单元格进行和div一样的样式定义，三行css代码。



td{
　 white-space: nowrap;
　　overflow: hidden;
　　text-overflow: ellipsis;
}



以上总结可得到代码

[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]

【注意】，表格定义了fixed，那么就一定要给表格定义width宽度，百分比和数值都可以


在百度搜索完整的CSS强制不换行超过div或表格部分长度采用省略号内容，或者用Google搜索相关的更多内容

By [cnbruce] at 20:26:09 | 评论 [1] | 浏览 [8622] | TrackBack| 返回顶部
9 Meta定义网页自动适配电脑或... :篇一上 下一篇: [转]淘宝商城鼠标经过区域变亮... :

About Comments
此篇日志暂时没有相关的说明和评论。：）


Post a Comment
呢称: 验证码： 
禁止笑脸转换 禁止UBB | 缩放输入框：6 5 | [Ctrl+Enter提交](1000个字符限制)