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

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

应用表现:在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] | 浏览 [3599] | TrackBack| 返回顶部

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


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