CSS控制的内容超过容器宽度后显示省略号

text-overflow:ellipsis属性在FF中是没有效果的。

同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果
text-overflow是一个比较特殊的属性，在CSS手册中，这个属性是这样定义的：

语法：
text-overflow : clip | ellipsis
参数：
clip : 　不显示省略标记（...），而是简单的裁切
（clip这个参数是不常用的！）
ellipsis : 　当对象内文本溢出时显示省略标记（...）
说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

示例：
div { text-overflow : clip; }

　　text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow: ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

　　关于text-overflow属性如何应用，我们作如下的说明讲解：

　　text -overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

一般我们看到的比如新闻列表，为了使文字不回行，控制字数，会通过程序让多余的字符显示省略号，我们只使用CSS可以达到同样的效果，虽然不完美。


li { width:50px; white-space:nowrap; /*一行显示*/text-overflow:ellipsis; /*显示...*/overflow: hidden; /*缺少无效*/}

首先是一个容器，可以是div,li,td等等，先定义宽度，“white-space:nowrap”是强制在一行内显示所有文本，不回行。“text-overflow:ellipsis”就是关键了。

text- overflow是CSS3新增的属性，IE6以上版本支持。它可以带2个参数：clip [不显示省略标记（...），而是简单的裁切]，ellipsis[当对象内文本溢出时显示省略标记（...）]。所以，这个方法是不支持Firefox 的。因此，我们还要加上一句overflow: hidden，让多余文字在ff中隐藏

CSS控制的内容超过容器宽度后显示省略号相关推荐

CSS 控制单行或者多行文本超出显示省略号
1.单行文本 p {overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段 ...
css3 flex 省略号,flex 布局下 CSS 文本超出单行宽度后显示省略号
布局两栏布局,左边定宽,右边 flex-grow: 1,自动填满剩余空间. image.png {{book.name}} {{book.author}} 给 book-info 设置width: ...
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度如图: 1.自动换行 <div style="widht:100%;height:100%;wo ...
视频直播APP源码，通过css控制div内容展开更多/收起效果
视频直播APP源码,通过css控制div内容展开更多/收起效果一. 实现思路需要设置一个变量控制展开 / 收起效果提前写好最高高度的class样式,超出这个高度多余内容会隐藏只有在列表数据长度 ...
css设置内容超出后显示省略号
在写前端页面时,通常会遇到文字超出后显示省略号: 页面本来是这个样子的,第一行的文字超出已经压倒了下面的文字, 第一步,使用overflow: hidden把超出的内容进行隐藏,页面变成了这样第二步 ...
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案文章目录 CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二 ...
新闻列表中，常用的文字超出后显示省略号..
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...

CSS控制的内容超过容器宽度后显示省略号

CSS控制的内容超过容器宽度后显示省略号相关推荐

最新文章

热门文章