收藏
回答

cover-view组件设置max-width在模拟器正常,在真机无效,请问怎么解决?

组件:cover-view组件

微信版本号:安卓微信 8.0.6

cover-view组件设置了max-width的值,white-space设置为normal,在模拟器上能够正常以最大宽度换行显示,但是真机一行只显示了3个字,就被换行了,设置的max-width无效,请问下这种情况怎么办

css部分:
.customCallout {
  background-color: #fff; 
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 6px 10px;
  white-space:normal;
}

.content {
  font-size: 14px;
  white-space:normal;
  max-width: 500rpx;
  margin: 0px auto;
}

wxml部分:
<cover-view slot="callout">
        <block wx:for="{{customCalloutMarker}}">
          <cover-view  class="customCallout" marker-id="{{item.id}}" >
            <cover-view class="content"> 
              {{item.title}}
            </cover-view>
          </cover-view>
        </block>
    </cover-view>
回答关注问题邀请回答
收藏

2 个回答

  • 涂之包
    涂之包
    06-16

    width: max-content; 或 width: 100%; 试试

    06-16
    有用
    回复 4
    • 涂之包
      涂之包
      06-16
      还不行就套 flex 布局用 flex-grow: 1;
      06-16
      回复
    • 涂之包
      涂之包
      06-16回复涂之包
      max-width 是用来限制最大宽度的,但你没给width,就连最外层cover-view也没给宽度,如果是默认宽度那现在的表现为自动宽度就是正确的。
      06-16
      回复
    • 黑色的星空
      黑色的星空
      06-16
      我需要的效果是默认自适应宽度,但是同时又限制最大宽度
      06-16
      回复
    • 黑色的星空
      黑色的星空
      06-16
      不能给100%,这样就不是根据内容自适应宽度了
      06-16
      回复
  • 不走寻常路
    不走寻常路
    06-15

    white-space:nowrap;

    word-wrap:break-word;

    word-break:break-all;

    三个强制换行属性都挨个试试,或者max-width改成width
    


    06-15
    有用
    回复 1
    • 黑色的星空
      黑色的星空
      06-15
      换行是有效的,max-width无效,最大宽度必须使用,因为具体的内容是不确定的,width要自动适配,只限制最大宽度
      06-15
      回复
登录 后发表内容