标签内容的溢出处理

 效果图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.lab {
  /*溢出部分隐藏*/
  overflow: hidden;
  /*将被隐藏的那部分用省略号代替。*/
  text-overflow: ellipsis;
  /*为了保证无论单元格中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格。*/
  white-space: nowrap;
  /*给标签设置溢出宽度*/
   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>

原文地址:https://www.cnblogs.com/12kk/p/7563059.html