css text-overflow属性怎么用
程序员文章站
2022-04-04 15:54:29
...
css text-overflow属性用于指定当文本溢出包含它的元素时,应该发生什么事情。所有主流浏览器都支持 text-overflow 属性。
css text-overflow属性怎么用?
text-overflow 属性规定当文本溢出包含元素时发生的事情。
语法:
text-overflow: clip|ellipsis|string;
属性值:
● clip:修剪文本。
● ellipsis:显示省略符号来代表被修剪的文本。
● string:使用给定的字符串来代表被修剪的文本。
注释:所有主流浏览器都支持 text-overflow 属性。
css text-overflow属性 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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>
效果图:
以上就是css text-overflow属性怎么用的详细内容,更多请关注其它相关文章!
推荐阅读
-
css怎么用,divcss布局经典实例
-
css怎么用,divcss布局经典实例
-
ACDsee怎么用?acdsee做图像属性的教程
-
VS2019怎么设置CSS的默认属性?
-
2个属性用CSS实现图片自适应浏览器
-
怎么用css属性屏蔽鼠标事件(鼠标点击可穿透上层元素)
-
浅析CSS3 用text-overflow解决文字排版问题
-
关于用图片做无序列表的项目符号,我做出来怎么是这个样子?_html/css_WEB-ITnose
-
怎么用dreamweaver做一个可以换肤的界面_html/css_WEB-ITnose
-
发现一个特效会让你有意思,有人知道这个用css可以做出来吗,怎么做?_html/css_WEB-ITnose