收藏
回答

Skyline目前text不支持缩进text-indent这个属性?

skyline如果文本布局复杂的情况下,无法达到预期效果。

预期效果

目前的解决方案就是【ANESSA】前面加了nbsp;空格来达到缩进效果

希望官网text组件支持text-indent属性


less:

.product-name-skyline {
    padding-top: 12rpx;
    box-sizing: border-box;
    width: 100%;
    color: #222222;
    font-size: 28rpx;
    line-height: 38rpx;
    height: 88rpx;
    .ip-pic,
    .ip-label {
        position: absolute;
    }
    .brand-name {
        font-weight: bold;
        margin-right: 10rpx;
    }
    .ip-pic {
        display: inline-block;
        width: @ipPicWidth;
        height: 28rpx;
        transform: translateY(4rpx);
    }
}


wxml:

<view wx:if="{{isSkyline}}" class="product-name-skyline">
            <!-- 这里的图片标签要设置为绝对定位 -->
            <image wx:if="{{ipLabeStyle.pic && product.showIpLabelImage}}" class="ip-pic" src="{{ipLabeStyle.pic}}" mode="heightFix"/>
            <text overflow="ellipsis" max-lines="2">
                <!-- 注意:空格不要删 目前通过输入多个空格来达到缩进的效果 Skyline目前text不支持缩进text-indent这个属性 -->
                <text wx:if="{{product.brandShowName && product.showIpLabelImage}}" decode="{{true}}" class="brand-name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{product.brandShowName}}</text>
                <text>{{product.title}}</text>
            </text>
        </view>

回答关注问题邀请回答
收藏

1 个回答

  • 小chao
    小chao
    07-19

    看了文档,text可以内嵌span组件, 可以达到预期效果


    https://developers.weixin.qq.com/miniprogram/dev/component/text.html?property=skyline

    新增 span 组件用于内联文本和图片,如 <span> <image> </image> <text>bar</text> </span>

    修正方案后:

    <text overflow="ellipsis" max-lines="2">
                    <span>
                        <image wx:if="{{ipLabeStyle.pic && product.showIpLabelImage}}" class="ip-pic" src="{{ipLabeStyle.pic}}" mode="heightFix"></image>
                        <text>{{product.brandShowName}}</text>
                        <text>{{product.title}}</text>
                    </span>
                </text>
    


    07-19
    有用
    回复
登录 后发表内容