H5C3

最新推荐文章于 2023-02-26 01:30:42 发布

weixin_33827590

最新推荐文章于 2023-02-26 01:30:42 发布

阅读量71

点赞数

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

版权

移动端meta标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制代码

单行文本溢出省略

  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
复制代码

多行文本溢出省略

<div class="overflow-ellipsis">测试多行文本溢出省略的文案</div>

div{
  width: 200px; /* 不要设置容器高 */
}
div.overflow-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 超过3行省略 */
  -webkit-box-orient: vertical;
  
  word-break: break-all;
  text-align: justify;
}
复制代码

底部弹框动画

<view class="popout {{ifShowPopout ? 'popout-translate' : ''}}">底部弹框</view>

.popout{
  position: fixed;
  z-index: 100;
  left: 0;
  bottom: 0;
  width: 750rpx;
  background: #fff;
  
  transition: transform 0.2s ease;
  transform: translate3d(0, 100%, 0);
}
.popout-translate{
  transition: transform 0.2s ease;
  transform: translate3d(0, 0, 0);
}
复制代码

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