ourai/text-ellipsis.html

## text-ellipsis.html
<!DOCTYPE>
<html>
  <head>
    <meta charset="UTF-8">
    <title>文本省略</title>
    <style>
      a,
      span {
        display: inline-block;
        *display: inline;
        vertical-align: middle;
        zoom: 1;
      }

      a {
        background-color: orange;
      }

      span {
        background-color: yellow;
      }

      .te a {
        overflow: hidden;
      }

      .te span {
        max-width: 150px;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div>
      <h3>完整文本</h3>
      <a href="javascript:void(0);"><span>一个目前人在杭州，主要从事 web 前端开发的 web developer。</span></a>
    </div>
    <div class="te">
      <h3>省略文本</h3>
      <a href="javascript:void(0);"><span>一个目前人在杭州，主要从事 web 前端开发的 web developer。</span></a>
    </div>
  </body>
</html>
	<!DOCTYPE>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>文本省略</title>
	<style>
	a,
	span {
	display: inline-block;
	*display: inline;
	vertical-align: middle;
	zoom: 1;
	}

	a {
	background-color: orange;
	}

	span {
	background-color: yellow;
	}

	.te a {
	overflow: hidden;
	}

	.te span {
	max-width: 150px;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	}
	</style>
	</head>
	<body>
	<div>
	<h3>完整文本</h3>
	<a href="javascript:void(0);"><span>一个目前人在杭州，主要从事 web 前端开发的 web developer。</span></a>
	</div>
	<div class="te">
	<h3>省略文本</h3>
	<a href="javascript:void(0);"><span>一个目前人在杭州，主要从事 web 前端开发的 web developer。</span></a>
	</div>
	</body>
	</html>