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

最新推荐文章于 2024-06-05 09:45:20 发布

weixin_34245749

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量250

点赞数

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

版权

单行文本溢出省略号

核心代码就三行:

  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/5cdf76dbe51d45105c09fe77

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34245749

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS小技巧--单行文本溢出和多行文本溢出

单行文本溢出省略号核心代码就三行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap;复制代码demo:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin...
复制链接

扫一扫