小程序中的文字在苹果ios平台上偏大且不受font-size控制

原创 创建时间:2019-10-09 访问量:6 赞:0 踩:0

在开发跑马灯类小程序组件时有下面一段wxss

/* components/marquee/marquee.wxss */

.container {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  align-items: center;
  font-size: 30rpx;
  line-height: 30rpx;
}

.left {
  width: 100rpx;
  border-right: 1px solid rgb(219, 219, 219);
  text-align: center;
  color: rgb(27, 134, 221);
  font-weight: bold;
  position: relative;
}

.right {
  width: 10rpx;
}

.marquee-container {
  background-color: #fff;
  position: relative;
  overflow: hidden;
  flex: 1;
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  animation-name: around;
  animation-duration: var(--marqueeSeconds--);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  color: rgb(27, 134, 221);
}

@keyframes around {
  from {
   margin-left: 100%;
  }
  to {
   margin-left: var(--marqueeWidth--);
  }
}

.tag {
  width: 10rpx;
  height: 10rpx;
  border-radius: 5rpx;
  background-color: red;
  position: absolute;
  left: 2rpx;
  top: -2rpx;
}

  注意到css类.marquee-text。字体大小在.container中设置好了为30rpx;在模似器和android上显示都没有问题,在ios上这.marquee-text修饰的文字就比较大,而且怎么设置font-size在ios上就没啥用,在android又是可以的。

下面来找东西填坑:

这段文字的css:

.marquee-text {

  display: inline-block;

  white-space: nowrap;

  animation-name: around;

  animation-duration: var(--marqueeSeconds--);

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  color: rgb(27, 134, 221);

}

我把white-space:nowrap这一行注释掉,随意文本换行了,但是字体大小受控制了,可以了。但是总不能不white-space这个属性吧,也没有找到其他什么好的方案啊,针对这个跑马炮效果的css还必须用,用其他的不行,那怎么办?

换个思路:

随然white-space:nowrap这个属性有影响不能老死在这个属性上,经过不断的尝试发现,把display改成inline就可以了。为啥,我也不知道啊,针对这个应只能用inline、inline-block。但inline-block又影响white-space属性在ios上的显示效果。

最后验证:

把display:inline-block改为display:inline即可完美的解决这个问题。






评论
 我想说:
==已经到底了==
关注: 粉丝: 积分:
Copyright ©2018 工联信息网——打造最实用且免费的互联网资源共享社区
如有疑问和需求请致邮箱:need@glxxw2018.com
不良信息反馈及建议请致邮箱:accusation@glxxw2018.com
沪ICP备18018158号-1