用CSS做长度超过长度显示‘...’，当鼠标放上时显示全部内容-优快云博客

本文深入探讨了HTML和CSS中的文本样式与布局属性，包括文本溢出处理、文本对齐方式、方向设置、文本换行策略等核心概念，通过实例展示了如何在网页中灵活运用这些属性以实现美观且功能丰富的文本展示。

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

<!DOCTYPE html>

<html>

<head>

<title>文本相关属性设置</title>

/* 为div元素增加边框 */

div{

border:1px solid #000000;

height: 30px;

width: 200px;

}

</style>

</head>

<body>

text-overflow:ellipsis <tr><td style="overflow:hidden;white-space:nowrap

;text-overflow:ellipsis;"title="测试文字测试文字测试文字测试文字测试文字测试文字">测试文字测试文字测试文字测试文字测试文字测试文字</td></tr>

</body>

</html>

<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>文本相关属性设置</title><style type="text/css">/* 为div元素增加边框 */div{border:1px solid #000000;height: 30px;width: 200px;}</style></head><body>text-indent:20pt <div style="text-indent:20pt">测试文字</div>text-indent:40pt <div style="text-indent:40pt">测试文字</div>text-align:center <div style="text-align:center">测试文字</div>text-align:right <div style="text-align:right">测试文字</div>direction:rtl <div style="direction:rtl">测试文字</div>direction:ltr <div style="direction:ltr">测试文字</div>white-space:nowrap <div style="white-space:nowrap">测试文字,疯狂Java讲义，疯狂XML讲义</div>text-overflow:clip <div style="overflow:hidden;white-space:nowrap;text-overflow:clip;">测试文字测试文字测试文字测试文字测试文字测试文字</div>text-overflow:ellipsis <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">测试文字测试文字测试文字测试文字测试文字测试文字</div>text-overflow:ellipsis <tr><td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:200px;">测试文字测试文字测试文字测试文字测试文字测试文字</td></tr></body></html>