“Css3 pr text overflow”的版本间差异
本页内容
(创建页面,内容为“{{DISPLAYTITLE:text-overflow}}7 = CSS3 text-overflow 属性 = 使用text-overflow属性: <sample title="" desc="" lang="html" hererun="1"> div.test { text-overflow:ellipsis; } </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div.test { white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000; } </style> </head> <…”) |
无编辑摘要 |
||
(未显示同一用户的1个中间版本) | |||
第1行: | 第1行: | ||
{{DISPLAYTITLE:text-overflow}}[[Category: | {{DISPLAYTITLE:text-overflow}}[[Category:css reference|197]] | ||
= CSS3 text-overflow 属性 = | = CSS3 text-overflow 属性 = | ||
第44行: | 第44行: | ||
{| class="table table-striped table-hover" | {| class="table table-striped table-hover" | ||
! 属性 | ! 属性 | ||
! | ! Chrome | ||
! | ! Internet Explorer / Edge | ||
! | ! Firefox | ||
! | ! Safari | ||
! | ! Opera | ||
|- | |- | ||
| text-overflow | | text-overflow |
2022年8月19日 (五) 04:48的最新版本
CSS3 text-overflow 属性
使用text-overflow属性:
示例
div.test {
text-overflow:ellipsis;
}
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.09.0 -o- |
属性定义及使用说明
text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(不是所有浏览器都支持)。
text-overflow 需要配合以下两个属性使用:
默认值: | auto |
继承: | no |
动画: | 支持。 阅读关于 animatable |
Version: | 3 |
JavaScript 语法: |
object.style.textOverflow="ellipsis"
|
语法
text-overflow: clip|ellipsis|string|initial|inherit;
值 | 描述 | |
---|---|---|
clip | 剪切文本。 | |
ellipsis | 显示省略符号 ... 来代表被修剪的文本。 | |
string | 使用给定的字符串来代表被修剪的文本。 | |
initial | 设置为属性默认值。阅读关于 initial | |
inherit | 从父元素继承该属性值。 阅读关于 inherit |
更多实例
悬停显示整个文本 这个例子演示了当鼠标悬停在该元素,如何显示整个文本。
相关文章
CSS3 教程: CSS3 文本效果