CSS小技巧--单行文本溢出和多行文本溢出

最新推荐文章于 2025-04-04 16:14:45 发布

weixin_34205826

最新推荐文章于 2025-04-04 16:14:45 发布

阅读量108

点赞数

原文链接：https://juejin.im/post/5d0a51305188255482699bc5

版权

单行文本溢出省略号

核心代码就三行:

  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>
复制代码

转载于:https://juejin.im/post/5d0a51305188255482699bc5