text-overflow文本溢出

最新推荐文章于 2025-08-14 13:53:23 发布

iteye_5129

最新推荐文章于 2025-08-14 13:53:23 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css3

本文链接：https://blog.youkuaiyun.com/iteye_5129/article/details/82678092

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用CSS属性text-overflow实现文本超出容器时的显示效果，包括使用省略号、裁剪或自定义字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[size=x-large][color=red]建议使用text-overflow:ellipsis;文本超出后以省略号形式显示[/color][/size]


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</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>