小白教程
所有教程
关于
Search
172.70.127.9
172.70.127.9
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr text overflow”的源代码
本页内容
上一节:
Css3_pr_text_outline
下一节:
Css3_pr_text_shadow
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:text-overflow}}[[Category:css reference|197]] = 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> <body> <p>以下 div 容器内的文本无法完全显示,可以看到它被裁剪了。</p> <p>div 使用 "text-overflow:ellipsis":</p> <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> <p>div 使用 "text-overflow:clip":</p> <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div> <p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p> <div class="test" style="text-overflow:'>>';">This is some long text that will not fit in the box</div> </body> </html> </run> 在此页底部有更多的例子。 == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! 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 需要配合以下两个属性使用: * [https://www.xiaobai.wang/cssref/pr-text-white-space.html white-space: nowrap;] * [https://www.xiaobai.wang/cssref/pr-pos-overflow.html overflow: hidden;] {| class="table table-striped table-hover" |width="50%"| 默认值: |width="50%"| auto |- | 继承: | no |- | 动画: | 支持。 [[css animatable|阅读关于 animatable]] |- | Version: | 3 |- | JavaScript 语法: | object.style.textOverflow="ellipsis" <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> #myDIV { border: 1px solid black; background-color: lightblue; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: visible; } </style> </head> <body> <h1>使用 JavaScript 修改 text-overflow</h1> <p>点击以下按钮修改 DIV 元素的 text-overflow 属性:</p> <button onclick="myFunction()">点我</button> <div id="myDIV"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> <script> function myFunction() { document.getElementById("myDIV").style.textOverflow = "ellipsis"; } </script> </body> </html> </run> |} == 语法 == <pre>text-overflow: clip|ellipsis|string|initial|inherit;</pre> {| class="table table-striped table-hover" ! 值 ! 描述 ! |- | clip | 剪切文本。 | |- | ellipsis | 显示省略符号 ... 来代表被修剪的文本。 | |- | string | 使用给定的字符串来代表被修剪的文本。 | |- | initial | 设置为属性默认值。[[css initial|阅读关于 initial]] | |- | inherit | 从父元素继承该属性值。 [[css inherit|阅读关于 inherit]] | |} == 更多实例 == [[try.php?filename=trycss3_text overflow_hover|悬停显示整个文本]] 这个例子演示了当鼠标悬停在该元素,如何显示整个文本。 == 相关文章 == CSS3 教程: [[css3 text effects|CSS3 文本效果]]
返回至“
Css3 pr text overflow
”。
上一节:
Css3_pr_text_outline
下一节:
Css3_pr_text_shadow