CSS小技巧--单行文本溢出和多行文本溢出单行文本溢出省略号核心代码就三行:demo:多行文本溢出省略号核心代码四行:-

单行文本溢出省略号

核心代码就三行:

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

demo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  div{
  border: 1px solid red;
  max-width:200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  </style>
</head>
<body>
<div>11111111111111111118877777777777777777</div>
</body>
</html>

多行文本溢出省略号

核心代码四行:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

-webkit-line-clamp: 2; 可以设置行数

demo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  div{
  border: 1px solid red;
  max-width:100px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

}
  </style>
</head>
<body>
<div>111111111111111111113333333333
  1111111111111111111111
  111118855555555555
  77777777777
  777777</div>
</body>
</html>