CSS基础:text-overflow:ellipsis溢出文本的显示样式

语法：
　　text-overflow : clip | ellipsis

参数：
　　clip : 　不显示省略标记（...），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

　　说明：
　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
　　请您注意，text-overflow:ellipsis属性在FF中是没有效果的。

注意：单独定义text-overflow属性是没有任何效果的

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

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

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

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

资料来源：http://www.52css.com/article.asp?id=602

转载于:https://www.cnblogs.com/daxian2012/archive/2012/07/10/2584098.html

CSS基础:text-overflow:ellipsis溢出文本的显示样式相关推荐

CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
4要素: width: 125px; //宽度必须 text-overflow: ellipsis/clip; //省略号或裁剪: white-space: nowrap;//强制内容在一行显示; ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
CSS基础：overflow属性
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
CSS 单行溢出文本只显示部分内容
.cc-item div { width:175px; text-overflow:clip; //该属性适用于IE6,IE7 max-width:175px; //该属性适用于IE8++,FF ...
2021-04-03 Web前端之CSS——选择器、字体属性、文本属性、样式表
视频课程:黑马程序员Pink老师笔记: 选择器以及一条或多条声明写在<head><style>之间</style></head> font-size ...
CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...
34、CSS高频前端面试题之CSS基础
参考:https://juejin.cn/post/6905539198107942919 目录一.CSS基础 1. CSS选择器及其优先级 2.CSS中可继承与不可继承属性有哪些 2.1 无继承性 ...
CSS基础面试题精选
css 基础 1. 引入CSS样式表(书写位置) 1.1 行内式(内联样式) <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容 ...
css使用三个属性设置文本结尾省略号显示
三个css属性设置文本内容超出部分,省略号显示文章目录前言一.三个属性二.属性使用三.使用总结前言本篇文章主要记录了css样式设置文本超出部分省略号显示,适用于input标签和普通标签 ...

CSS基础:text-overflow:ellipsis溢出文本的显示样式

CSS基础:text-overflow:ellipsis溢出文本的显示样式相关推荐

最新文章

热门文章