标签内容的溢出处理

最新推荐文章于 2023-07-10 00:02:52 发布

weixin_34306593

最新推荐文章于 2023-07-10 00:02:52 发布

阅读量440

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/12kk/p/7563059.html

本文介绍了一种使用CSS来优雅地处理文本溢出的方法，通过设置特定样式属性实现文本的省略显示，确保页面布局整洁且信息传达清晰。

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

效果图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.lab {
　　/*溢出部分隐藏*/
　　overflow: hidden;
　　/*将被隐藏的那部分用省略号代替。*/
　　text-overflow: ellipsis;
　　/*为了保证无论单元格中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。*/
　　white-space: nowrap;
　　/*给标签设置溢出宽度*/
　　width: 150px;
　　/*让标签可视化(主要是针对块状元素--常用的有：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<address>,<blockquote>,<form>)*/
　　display: block;
}
</style>
</head>
<body>
　　<label>溢出未处理：xxxxxxxxxxxxxxxxxx</label>
　　<label class="lab">溢出处理后：xxxxxxxxxxxxxxxxxx</label>
</body>
</html>